Animate.css - это библиотека готовых кроссбраузерных анимаций для использования в ваших веб-проектах. Отлично подходит для выделения элементов, домашних страниц, ползунков и подсказок для привлечения внимания.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
или строчно
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
animate__animated animate__fadeInDownBig
animate__animated animate__fadeInDownBig__delay-5s
animate__animated animate__rubberBand animate__repeat-3 3
Более подробно и все анимации на сайте
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>
Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:
<style>
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
</style>