Подключение и примеры использования Animate.css

    Один комментарий 3273

Монитор ImacПривет. Напомню, что уже писал про плавность и анимацию в CSS3, но это были всего лишь базовые принципы. Сейчас же предлагаю ознакомиться с готовым набором свойств анимации в одном файле animate.css. Это не генератор, а библиотека, которая вполне корректно работает во всех популярных браузерах. И вы можете посмотреть вот эти примеры.

Демо

Телеграм-канал serblog.ru

Подключение Animate.css

Если вы хотите сделать CSS анимацию картинки, текста, или кнопок для сайта и реализовать все это без использования Javascript, то необходимо всего лишь подключить один файлик, о котором уже говорилось выше, стандартным образом, то есть между тегами head.

 <link rel="stylesheet" href="animate.min.css" />

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

<a class="animated tada" href="#">Ссылка</a>

Именно таким образом прописывается свойства анимации объектов. Пишем 2 класса, animated — обязательный, а tada — один из эффектов. Но нам нужен непосредственно цикл и сейчас мы это сделаем. Это можно сделать, создав новый класс и прописать к нему специальные свойства или же к уже существующему.

Циклическая анимация Animate.css

.tada{animation-iteration-count: infinite;}

То есть при создании своего класса, это будет выглядеть вот так:

<a class="animated tada new" href="#">Ссылка</a>
.new{animation-iteration-count: infinite;}

А чтобы вам было еще более понятно, что я тут пытался объяснить, то посмотрите это видео, где я наглядно демонстрирую на реальном примере как это работает, а так же скачайте сами стили.

СКАЧАТЬ

Любая сумма на развитие сайта

1 комментарий
  1. Алексей:

    Я пользуюсь CSS анимацией Animate.style. Все нравиться, но есть один момент. Там надо подключать и удалять классы через код JS. Если вам нужна анимация при клике или наведении мыши. Используется JS оператор добавления класса. После анимации, удаляется класс. Как узнать что анимация закончилась и удалить класс? Используйте функцию el.addEventListener(«animationend», () => { //del class// });.
    И цикличная анимация сейчас добавляется по новому. Просто добавьте к элементу класс animate__infinite.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *