Примеры:
ANIMATE.CSS
Выберите нужный эффект:
Установка:
Просто добавляем на сайт стили animate.css:
- Скачать: animate.min.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
Добрый день
На мобильной версии не работает анимация (
Огромное спасибо, целый день искал!
прикольно
я такая нажимаю но не выходит
Нашел выход для гугл хром для тех у кого не показывает анимацию.
Переходим попути - Параметры Windows - Специальные возможности -
Выбираем слева вкладку "Дисплей " и в пункте "Упрощение и персонализация Windows" Включаем "Показывать анимацию в Windows".
И у меня работает только в IE, хром и Edge не показывают анимацию...
Приветствую. Возможно глупый вопрос доя тех кто в теме, но для меня актуальный как для профана - библиотеку можно подключить только скачав её или есть вариант как джевери через скрипт подключить?
Можно подключить с CDN
Благодарочка
Шеф, поправь анимацию не работает у тебя ни через какой браузер.
Не работает кнопка анимировать.
Может вы не того результата ожидаете?
Обновил сейчас ФФ, да и во всех браузерах у меня работало и работает.
По кнопке анимировать, анимируется квадратик выше
у меня тоже не работает анимация ни на этом сайте не у меня=((( браузеры пробовал разные и хром и мазила
Добрый день, подскажите пожалуйста, есть ли возможность установить задержку перед анимацией менее 1с? В старых версиях это делалось через " data-animation-delay="200"" (к примеру). В этой версии "delay-0.5s", "delay-500ms", "delay-500" - не работает.
Спасибо!
Классов таких нет, вот и не работает.
Нужно просто к анимированному элементу добавить свою задержку
.animelem { animation-delay: 0.5s; }Спасибо!
Если вам нужна анимация при клике или наведении мыши. Используйте JS оператор добавления класса. После анимации, удалите класс. Как узнать что анимация закончилась и удалить класс? Используйте функцию el.addEventListener("animationend", () => { //del class// });. Рабочий пример кода:
http://profi.spage.me/css/use-css-library-animate
Почему не работает демонстрационные примеры на этом сайте?
У меня нормально работают примеры.
А какой браузер?
FireFox 88 да и в Опере не работает((
Подскажите, как сделать чтобы анимация работала только на одной картинке? У меня подключается сразу к двум
Дайте лучше ссылку на пример.
Сюда код криво как то скопировался, но подозреваю что у вас обе картинки вложены в 1 блок, на котором стоит анимация.
Или закиньте больший кусок кода на почту мне или в ВК
А возможно ли активировать анимацию, только тогда, когда элемент становится видимым, то есть при прокрутке к нему?
Для этого используются скрипты или плагины, например WOW:
https://atuin.ru/blog/animaciya-elementov-pri-prokrutke-wow-js/
Он как раз работает на этих стилях