Animate.css — набор кроссбраузерных CSS3 анимаций

Animate.css — набор кроссбраузерных CSS3 анимаций

31.07.201515844Syava

Библиотека включает в себя 56 анимаций, сгруппированных по типу эффекта, включает в себя «вход» и «выход» из анимирования элемента, а так же простой конструктор, который даёт возможность включить в файл только нужные эффекты.

Основное использование

1. Для того что бы начать пользоваться анимацией, нам нужно подключить файл animate.min.css, разместив соответствующий код между тегов <head> </head>.

Код
<link type="text/css" rel="stylesheet" href="animate.min.css">

2. Для того что бы анимировать элемент, нам нужно будет подключить два класса. Один из них основной - .animated, который подключает саму анимацию, второй же определяет, какой именно тип будет использоваться. Ниже приведен полный список всех анимаций, которые можно использовать:

  • 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

Как должен выглядеть пример кода элемента с анимацией? Все очень просто. Возьмем для примера тег h1 и присвоим ему наши два класса. Будет это выглядеть следующим образом.

Код
<h1 class="animated bounceIn"></h1>

Класс bounceIn можно заменить на любой другой вариант из списка который был предоставлен выше. Использовать естественно можно не только к тегам, но и к блокам

Код
<div class="animated bounceIn">анимация bounceIn</div>

При подключении библиотеки jQuery, возможности использования animate.min.css переходят на новый уровень. Ищем элементы по селектору .animated, для которых при наведении мы будем добавлять класс анимации - bounceIn.

Код
<script type="text/javascript">
$('.animated').hover(
  function() {
  $(this).addClass('bounceIn');
  },
  function() {
  $(this).removeClass('bounceIn');
  }
);
</script>

Что бы посмотреть анимации в деле, вы можете зайти на демо страницу и проверить эффекты на практике. Так вам будет удобнее выбрать тот эффект, который вам придется больше по душе.




Сохраните в социальную сеть
Комментарии (4)
Будет полезно для тех, кто не знал
4
Good Theme 04.08.2015 в 13:37Спам
А этот сайт предназначает для тех, кто все знает? Что за глупости..
0
Below 31.07.2015 в 11:55Спам
То что нужна
0
Kophack 01.08.2015 в 08:56
Согласен.
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт