Набор анимаций animate.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 для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:
Название класса Время задержки
delay-2s 2s
delay-3s 3s
delay-4s 4s
delay-5s 5s
Продолжительность:
Название класса Скорость
slow 2s
slower 3s
fast 800ms
faster 500ms
Пример:
<div class="animated infinite bounce delay-5s slower">Пример</div>

Пример

Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:

.yourElement {
   animation-duration: 3s;
   animation-delay: 2s;
   animation-iteration-count: infinite;
}

Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js

animate.css на github.com

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Тим:

    Добрый день
    На мобильной версии не работает анимация (

    Ответить
  • Сергей:

    Огромное спасибо, целый день искал!

    Ответить
  • nurai:

    я такая нажимаю но не выходит

    Ответить
  • Александр:

    Нашел выход для гугл хром для тех у кого не показывает анимацию.
    Переходим попути - Параметры Windows - Специальные возможности -
    Выбираем слева вкладку "Дисплей " и в пункте "Упрощение и персонализация Windows" Включаем "Показывать анимацию в Windows".

    Ответить
  • Александр:

    И у меня работает только в IE, хром и Edge не показывают анимацию...

    Ответить
  • Жека:

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

    Ответить
  • Вячеслав:

    Шеф, поправь анимацию не работает у тебя ни через какой браузер.

    Ответить
  • Вячеслав:

    Не работает кнопка анимировать.

    Ответить
    • Alexander:

      Может вы не того результата ожидаете?
      Обновил сейчас ФФ, да и во всех браузерах у меня работало и работает.
      По кнопке анимировать, анимируется квадратик выше

      Ответить
  • Дмитрий:

    у меня тоже не работает анимация ни на этом сайте не у меня=((( браузеры пробовал разные и хром и мазила

    Ответить
  • Федор:

    Добрый день, подскажите пожалуйста, есть ли возможность установить задержку перед анимацией менее 1с? В старых версиях это делалось через " data-animation-delay="200"" (к примеру). В этой версии "delay-0.5s", "delay-500ms", "delay-500" - не работает.
    Спасибо!

    Ответить
    • Alexander:

      Классов таких нет, вот и не работает.
      Нужно просто к анимированному элементу добавить свою задержку

      .animelem {
         animation-delay: 0.5s;
      }
      Ответить
  • Алексей:

    Если вам нужна анимация при клике или наведении мыши. Используйте JS оператор добавления класса. После анимации, удалите класс. Как узнать что анимация закончилась и удалить класс? Используйте функцию el.addEventListener("animationend", () => { //del class// });. Рабочий пример кода:
    http://profi.spage.me/css/use-css-library-animate

    Ответить
  • Петр:

    Почему не работает демонстрационные примеры на этом сайте?

    Ответить
    • Alexander:

      У меня нормально работают примеры.
      А какой браузер?

      Ответить
      • Вячеслав:

        FireFox 88 да и в Опере не работает((

        Ответить
  • Дари:

    Подскажите, как сделать чтобы анимация работала только на одной картинке? У меня подключается сразу к двум

    Ответить
    • Alexander:

      Дайте лучше ссылку на пример.
      Сюда код криво как то скопировался, но подозреваю что у вас обе картинки вложены в 1 блок, на котором стоит анимация.
      Или закиньте больший кусок кода на почту мне или в ВК

      Ответить
  • Виталий:

    А возможно ли активировать анимацию, только тогда, когда элемент становится видимым, то есть при прокрутке к нему?

    Ответить
    • Alexander:

      Для этого используются скрипты или плагины, например WOW:
      https://atuin.ru/blog/animaciya-elementov-pri-prokrutke-wow-js/
      Он как раз работает на этих стилях

      Ответить