Для добавлении 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 */

 

Чтобы сделать комментарий, нужно авторизоваться на сайте!