Интересные эффекты анимации hover на CSS3

ktvdru

В CSS3 предусмотрено очень много интересных эффектов. Данная статья посвящена эффектам анимации hover


В этой статье приведено 10 распространенных эффектов анимации на чистом CSS, которые украсят и освежат любой сайт. К тому же сделать их может любой новичок.

Ниже будут подробно рассмотрены следующие эффекты:

1. Крутящийся элемент

Х

2. Дрожащий / дергающийся элемент (анимация Tada)

Х

3. «Падающая» иконка

Текст кнопки

4. Выезжающая иконка

Текст кнопки

5. Выезжающая иконка как на CoolWebMasters

6. Кнопка с бликом

Текст ссылки

7. Кнопка с увеличивающимся внутренним border

Текст ссылки

8. Качающаяся кнопка (анимация Swing)

Я качаюсь

9. Двойной текст с использованием data-hover

10. Выезжающий текст снизу с использованием data-hover

1. Крутящийся элемент

Хорошо подходит для маленьких элементов типа закрывающего крестика или стрелочки. На текстовые ссылки такое, конечно, вешать не надо.

Пример:

Х

Разметка здесь очень простая:

1

<div class="my-el">Х</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.my-el {
   border: 1px solid rebeccapurple;
   cursor: pointer;
   background: rgb(219, 199, 199);
   width: 17px;
   height: 17px;
   text-align:center;
   font-size: 14px;
   font-family: Arial;
   font-weight: bold;
   opacity: 0.6;
   z-index: 100;
   cursor: pointer;
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 600ms;
  -moz-transition: all 600ms;
  -o-transition: all 600ms;
  transition: all 600ms;
}
.my-el:hover {
  opacity: 1;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg));
}

Непосредственно за кручение отвечает свойство transform, все остальное — украшательства (еще в этом примере плавно меняется значение прозрачности opacity).

2. Дрожащий / дергающийся элемент (анимация Tada)


Часто такую анимацию вешают на иконки соцсетей и другие небольшие элементы. А выглядит это вот так:

Х

Верстка здесь такая же, как в предыдущем примере:

1

<div class="my-el2">Х</div>

А в css нужно написать не только свойства этого div, но и саму анимацию:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

.my-el2 {
border: 1px solid rebeccapurple;
   background: rgb(219, 199, 199);
   width: 17px;
   height: 17px;
   text-align:center;
   font-size: 14px;
   font-family: Arial;
   font-weight: bold;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   -o-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: ease;
   -moz-animation-timing-function: ease;
   -o-animation-timing-function: ease;
   animation-timing-function: ease; 
}
 
.my-el2:hover {
  -webkit-animation-name: Tada;
  -moz-animation-name: Tada;
  -o-animation-name: Tada;
  animation-name: Tada;
}
 
@-webkit-keyframes Tada {
    0% {
        -webkit-transform:scale(1)
    }
    10%, 20% {
        -webkit-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform:scale(1) rotate(0)
    }
}
@-moz-keyframes Tada {
    0% {
        -moz-transform:scale(1)
    }
    10%,20% {
        -moz-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -moz-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -moz-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -moz-transform:scale(1) rotate(0)
    }
}
@-o-keyframes Tada {
    0% {
        -o-transform:scale(1)
    }
    10%,20% {
        -o-transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -o-transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -o-transform:scale(1.1) rotate(-3deg)
    }
    100% {
        -o-transform:scale(1) rotate(0)
    }
}
@keyframes Tada {
    0% {
        transform:scale(1)
    }
    10%, 20% {
        transform:scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        transform:scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        transform:scale(1.1) rotate(-3deg)
    }
    100% {
        transform:scale(1) rotate(0)
    }
}

3. «Падающая» иконка

Пример:

Текст кнопки

Верстка этого элемента состоит из внешнего элемента А со SPAN внутри, который содержит иконку в качестве background:

1

<a class="my-button"><span class="icon-block"></span>Текст кнопки</a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

.my-button {
    overflow:hidden;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    background: green;
    padding: 0 10px;
    color: white;
    text-decoration: none;
    font-family: arial;
    cursor: pointer;
 }
 
.icon-block {
    position: relative;
    background: url('http://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width: 15px;
    height: 15px;
    display: block;
    float: left;
    margin:7px 7px 0 0;
 
}
.my-button:hover .icon-block {
    -webkit-animation: anim 0.6s linear 0s 1;
	-moz-animation: anim 0.6s linear 0s 1;
	-o-animation: anim 0.6s linear 0s 1;
    animation: anim 0.6s linear 0s 1;   
	}
 
  @-webkit-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
@-moz-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
@-o-keyframes anim {
 0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}
 
@keyframes anim {
0%{top:13px;opacity:1}
    30%{top:5px;opacity:1}
    60%{top:70px;opacity:1}
    70%{top:70px;opacity:0}
    80%{top: -50px;opacity:0}
    100%{top:13px;opacity:1}
}

Как видно из примера, анимация происходит вследствие изменения значения top у блока с иконкой. У внешнего блока нужно обязательно указывать overflow: hidden, так как иконка уезжает за его пределы.

4. Выезжающая иконка

Пример:

Текст кнопки

Здесь тот же принцип, что и в предыдущем примере, – анимируется положение иконки внутри ссылки при наведении на нее. Только верстка немного изменена — иконка задается как background к псевдоэлементу :before.

1

<a class="btn2" href="#"><span>Текст кнопки</span></a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

.btn2 {
    overflow: hidden;
    background: rgb(176, 12, 12);
    color: white;
    height: 35px;
    line-height: 35px;
    width: 130px;
    display: block;
    text-align:center;
    font-family: arial;
    font-size: 16px;
    text-decoration: none;
    position: relative;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    }
.btn2:before {
    content: '';
    background: url('http://ktvd.ru/wp-content/uploads/phone.png') top left no-repeat;
    width: 15px;
    height: 15px;
    display: inline-block;
    position: absolute;
    top:6px;
    left:-20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
}
.btn2:hover:before {
   left:6px; 
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -ms-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
  .btn2 span {
   margin-left: 0; 
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;    
}
 
.btn2:hover span {
    margin-left: 10px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

Внешний элемент .btn2 должен иметь position: relative, так как блок с иконкой спозиционирован абсолютно. Также есть небольшая анимация margin на span с текстом внутри .btn2 (.btn2:hover span), которая отодвигает его при появлении иконки.

5. Выезжающая иконка как на CoolWebMasters

Пример:

Анимация достигается за счет изменения background-position элемента. Нужно подготовить картинку с двумя состояниями иконки:

И верстка: 

1

<a class="btn3" href="#"></a>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.btn3 {
  background-image: url('http://ktvd.ru/wp-content/uploads/phone-i.jpg');
  background-position: 0 0;
  width: 40px;
  height: 40px;
  display: block;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}
 
.btn3:hover {
  background-position: 40px 0; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; 
}

6. Кнопка с бликом

Пример:

Текст ссылки

Блик делается через псевдоэлемент :after, который повернут на 35 градусов.

Верстка совсем простая, достаточно присвоить ссылке класс:

1

<a href="#" class="btn4">Текст ссылки</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

.btn4 {    
  background: green;   display: inline-block;
  padding: 10px;
  position: relative;
  color: white;
  text-decoration: none;
  font-family: arial;
  border-radius: 5px;
  overflow: hidden;
} 
.btn4:after {
  content: '';
  width: 45px;
  height: 95px;
  display: block;
  background: rgba(194, 194, 194, 0.2);
  right: -100px;
  position: absolute;
  top: -24px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: rotate(35deg);
  -moz-transform-origin: 0 0;
  -moz-transform: rotate(35deg);
  -ms-transform-origin: 0 0;
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;  
} 
.btn4:hover:after {
  right: 10px;   
}

7. Кнопка с увеличивающимся внутренним border

 

Текст ссылки

 

Здесь внутренний border сделан через inset text-shadow, которая и анимируется.

Верстка:

1

<a href="#" class="btn5">Текст ссылки</a>

CSS для анимации здесь такой:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.btn5 {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
.btn5:hover {
  box-shadow: inset 0 0 0 30px #53a7ea;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

8. Качающаяся кнопка (анимация Swing)

Выглядит это вот так:

Я качаюсь

Верстка здесь такая же, как в предыдущем примере, только ссылке задан класс btn6. В CSS нужно прописать стиль для :hover и саму анимацию swing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

.btn6:hover {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
 
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: swing;
  -moz-animation-name: swing;
  -o-animation-name: swing;
  animation-name: swing;
}
 
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
  }
}
 
@-moz-keyframes swing {
  20% {
    -moz-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -moz-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -moz-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -moz-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -moz-transform: rotate3d(0, 0, 1, 0deg);
  }
}
 
@-o-keyframes swing {
  20% {
    -o-transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    -o-transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
    -o-transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    -o-transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
    -o-transform: rotate3d(0, 0, 1, 0deg);
      }
}
 
 
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
 
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
 
  60% {
     transform: rotate3d(0, 0, 1, 5deg);
  }
 
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
 
  100% {
     transform: rotate3d(0, 0, 1, 0deg);
  }
}

9. Двойной текст с использованием data-hover

А вот еще один интересный эффект, который подойдет к текстовым ссылкам на цветном фоне:

В верстке этого элемента добавился атрибут data-hover, который содержит текст, прилетающий при наведении.

1

<a class="btn7" href="#" data-hover="Моя ссылка">Моя ссылка</a>

В CSS анимируется псевдоэлемент before, в который и передается текст из data-hover:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.btn7:hover:before {
  -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
  opacity: 1;
}
 
.btn7:before {
  color: white;
  content: attr(data-hover);
  position: absolute;
  opacity: 0;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  -moz-transition: -moz-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  pointer-events: none;
}

10. Выезжающий текст снизу с использованием data-hover

Как и в предыдущем примере, при наведении выезжает надпись, дублирующая текст ссылки, интересно будут смотреться разноцветные надписи.

В верстке внутрь ссылки нужно вставить span.

1

 <a class="btn8" href="#"><span data-hover="Моя ссылка">Моя ссылка</span></a>

СSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.btn8 {
  padding: 0 30px;
  height: 1.2em;
  overflow: hidden;
  font-size: 20px;
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: white;
  font-family: arial;
} 
.btn8 span {
  position: relative;
  padding: 0 5px;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
} 
.btn8 span:before {
  position: absolute;
  width: 100%;
  color: rgb(8, 120, 213);
  left: 0;
  top: 100%;
  content: attr(data-hover);
  font-weight: 700;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
} 
.btn8:hover span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}

2 thoughts on “Интересные эффекты анимации hover на CSS3”

  • zaxvatu.net
    27.04.2016 в 15:46
    Permalink

    Классная подборка. Даже и не думала, что эти эффекты настолько доступны. Хороший у вас сайт. Сегодня наткнулась.

    Ответить

Добавить комментарий для Аня Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *