CSS свойство animation - анимация на чистом CSS
Начнем с примера относительно простой анимации Прыгающего квадрата:
@keyframes
@keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени.
animation
Универсальное свойство, которое задаёт сразу несколько параметров анимации.
animation-delay
Устанавливает время ожидания перед запуском цикла анимации.
animation-direction
Устанавливает направление движения анимации.
animation-duration
Задаёт время в секундах или миллисекундах, сколько должна длиться анимация движения.
animation-fill-mode
Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке
animation-iteration-count
Устанавливает, сколько раз должен проигрываться анимационный цикл до остановки.
animation-name
Устанавливает одну или несколько анимаций, которые применяются к элементу.
animation-play-state
Свойство определяет, проигрывать анимацию или поставить её на паузу.
animation-timing-function
Устанавливает, по какой зависимости должна происходить анимация каждого цикла.
https://webref.ru/course/css-advanced/animation
https://html5book.ru/css3-animation/
https://starper55plys.ru/css/animatsiya-css-dlya-nachinayushhih/
https://webref.ru/css/animation
https://www.internet-technologies.ru/articles/15-luchshih-instrumentov-css3-animacii-dlya-razrabotchikov.html
Генератор CSS анимации
http://cssanimate.com/http://bouncejs.com/
http://jeremyckahn.github.io/stylie/
Если есть другие хорошие генераторы - присылайте
Пред. урок След. урок