Для добавлении CSS анимации на сайт можно воспользоваться уже готовыми решениями.
Сначала мы подключаем css файл в котором определены классы, которые мы можем применять для анимирования html елементов.
<head> <link rel="stylesheet" href="/animate.min.css"> </head>
Теперь чтобы использовать анимацию добавляем класс animated к нужному html элементу.
Чтобы анимация повторялась сначала, не останавливаясь, используем класс infinite
<h1 class="animated infinite bounce">Example</h1>
Список эффектов, которые можно использовать для анимации:
- bounce
- flash
- pulse
- rubberBand
- shake
- swing
- tada
- wobble
- jello
- bounceIn
- bounceInDown
- bounceInLeft
- bounceInRight
- bounceInUp
- bounceOut
- bounceOutDown
- bounceOutLeft
- bounceOutRight
- bounceOutUp
- fadeIn
- fadeInDown
- fadeInDownBig
- fadeInLeft
- fadeInLeftBig
- fadeInRight
- fadeInRightBig
- fadeInUp
- fadeInUpBig
- fadeOut
- fadeOutDown
- fadeOutDownBig
- fadeOutLeft
- fadeOutLeftBig
- fadeOutRight
- fadeOutRightBig
- fadeOutUp
- fadeOutUpBig
- flipInX
- flipInY
- flipOutX
- flipOutY
- lightSpeedIn
- lightSpeedOut
- rotateIn
- rotateInDownLeft
- rotateInDownRight
- rotateInUpLeft
- rotateInUpRight
- rotateOut
- rotateOutDownLeft
- rotateOutDownRight
- rotateOutUpLeft
- rotateOutUpRight
- hinge
- rollIn
- rollOut
- zoomIn
- zoomInDown
- zoomInLeft
- zoomInRight
- zoomInUp
- zoomOut
- zoomOutDown
- zoomOutLeft
- zoomOutRight
- zoomOutUp
- slideInDown
- slideInLeft
- slideInRight
- slideInUp
- slideOutDown
- slideOutLeft
- slideOutRight
- slideOutUp
В связке с файлом css анимации, обычно, еще используется WOW плагин, для того, чтобы онимация срабатывала не сразу при загрузке страницы, а когда html элемент станет виден после прокрутки страницы.
Можно также самим подкорректировать анимацию. В отдельном css файле переопределим эффект fadeInUp, например, так:
/* animate */
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* end animate */