Frontend Formula

CSS-анимации



Чтобы рассказать браузеру, с чего начать и чем закончить анимацию, используется директива @ keyframes. Но анимация всё ещё не работает! Потому что браузер не знает, какие свойства элемента нужно изменять.



Свойства:

👉 animation-duration — Устанавливает длительность анимации во времени за один цикл.

👉 animation-iteration-count — Указывает, сколько раз анимация будет проигрываться.

👉 animation-direction — Сообщает браузеру, должна ли анимация проигрываться в обратном порядке.

👉 animation-timing-function — Задаёт, как будет развиваться анимация между ключевыми кадрами: равномерно, или сначала быстро, потом медленно, или по каким-то сложным законам.

👉 animation-delay — Задаёт задержку воспроизведения анимации.

👉 animation-play-state — Позволяет ставить анимацию на паузу и запускать снова.

👉 animation-fill-mode — Сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.



Статья: https://doka.guide/css/animation/



#css #дока



👉 @frontend_formula