Animate css как подключить

Набор анимаций animate.css

Набор CSS классов для анимации различных элементов на сайте

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.

Примеры:

ANIMATE.CSS

Выберите нужный эффект:

Установка:

Просто добавляем на сайт стили animate.css:

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce	flash	pulse	rubberBand
shake	headShake	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	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Источник

Animate.Css – CSS3 Библиотека для создания анимации

За последние несколько лет в CSS появилось множество интересных фишек, которые делают веб разработку более увлекательной. Одной из таких вещей является CSS3 анимация. До CSS3, анимацию можно было реализовать только с помощью Javascript.

Сегодня мы покажем вам как работать с CSS3 библиотекой, которая превратит создание анимации в приятный и лёгкий процесс: Animate.css.

Данные эффекты можно применять как к тексту, так и к изображениям, формам и так далее.

Стартуем

Для активации Animate.css, подключите нужные классы к элементу страницы. Для начала подключите файл animate.css в разделе head. Скачать библиотеку можете с репозитория на Github.

По умолчанию Animate.css проигрывает анимацию единожды при загрузке страницы. Для цикличного проигрывания анимации, добавим немного Javascript-а.

Дополнительные CSS настройки

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

Если же нам необходимо воспроизвести анимацию конкретное количество раз, то можете следать это так.

Для изменения времени воспроизведения, можете подправить свойство animation-duration и animation-delay (задержка). Пример:

Javascript

Для анимирования при каком-то событии (к примеру при клике), воспользуемся Javascript. Для начала добавим ссылку.

С помощью Javascript мы можем создать функцию animate, в которую будем передавать название класса анимации:

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/animatecss-css3-animation-library/
Перевел: Станислав Протасевич
Урок создан: 6 Апреля 2014
Просмотров: 41052
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Как пользоваться Animate.css

Давайте посмотрим правде в глаза, в CSS3 первыми привлекли наше внимание анимации и переходы. До того без участия JavaScript’а они у нас никак не получались. То, что это CSS, еще не означает, что в помощь нам не существует библиотек. Одна из них – Animate.css.

Что такое Animate.css?

Animate.css – это библиотека, в которую встроены десятки классных кроссбраузерных анимаций, которыми можно пользоваться при разработке своего проекта. Идея та же, что у множества эквивалентов JavaScript’а, которыми мы уже привыкли пользоваться.

Применение Animate.css

Первое, что нужно сделать для использования данной библиотеки после ее скачивания – это подключить ее в свой HTML файл:

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

При перезагрузке страницы сразу же видно, что заголовок H1 уже анимируется. Все отлично, но обычно нам требуется анимировать элементы при нажатии кнопок или в момент какого-либо действия со стороны пользователя. Для этого нам понадобится немного JavaScript’а для запуска события click и добавить нужному элементу классы.

Представьте себе такой HTML:

Вам требуется анимировать раздел при нажатии кнопки с помощью fade. Сначала назначьте ему непрозрачность 0. Затем динамически добавьте нужные классы:

Если хотите, в CSS можно модифицировать скорость анимации, как показано здесь:

Кроме того, можно изменить размер задержки анимации и количество ее проигрышей с помощью animation-delay и animation-iteration-count.

Также очень классно получится, если по окончании анимации вызвать функцию и представить для перехода другую анимацию, или же просто запустить функцию. Для этого придется воспользоваться событием one, прикрепить его к окончанию анимации и добавить элементу класс нужной нам анимации. В данному случае я, кроме того, добавлю класс delay, что позволит получить задержку между проявлением fade in и исчезновением fade out:

Что касается CSS, то потребуется всего лишь добавить класс delay:

Тестируя свою страничку после добавления этого фрагмента CSS и JavaScript’а, вы увидите, что создали идеальную анимацию проявления fade in, она держится на странице две секунды, а затем постепенно исчезает – и при этом все анимации созданы с помощью одного лишь CSS.

На сайте Codepen есть демопример такой анимации.

Заключение

Мы очень сильно любим анимацию CSS, и появление подобной библиотеки сильно упрощает ее применение, а, кроме того, вся анимация является кроссбраузерной, что само по себе – огромный плюс.

Источник