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, и появление подобной библиотеки сильно упрощает ее применение, а, кроме того, вся анимация является кроссбраузерной, что само по себе – огромный плюс.

Источник

READ  Как подключить интернет на планшете хуавей
Поделиться с друзьями
Как подключить и установить...
Adblock
detector