Анимация средствами CSS

Наверняка вы заметили множество анимации на нашем сайте, все это реализовано средствами css. Все это позволяет изменять свойства объекта DOM из одного состояния в другое за определенный промежуток времени.

CSS анимация состоит из двух компонентов: дескрипторы css и самим набором keysframe-ов, последние определяют старт анимации и сами стили которые буду изменятся , а также возможные промежуточные точки анимации.

Есть три причины использовать СSS анимацию в замен традиционным JavaScript

CSS анимацию просто реализовать для простеньких эффектов, даже не зная JavaScript.
Анимация работает быстро даже при умеренной нагрузке системы в то время, как несколько анимаций реализованных с помощью скриптов могут значительно повысить нагрузку на ваш сайт.А все это благодаря тому, что при рендеренге СSS анимации учитываются border, padding и другие свойства это позволяет сохранить производительность.
Средствами браузера определяется производительность и просчитывается эффективность, например, уменьшается плавность анимации и частота кадров анимации в неактивных вкладках браузера.

Настройка CSS анимации

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

Свойства animation являются:

animation-delay — задержка между загрузкой анимации и её выполнением
animation-direction -определяет направление рендеринга анимации
animation-duration — определяет интервал времени который нужен для завершения анимации
animation-iteration-count — отвечает за количество итераций анимации
animation-name — имя анимации, по которому вызывается нужная анимация
animation-play-state — позволяет возобновлять и останавливать анимацию
animation-timing-function — определяет способ расчета промежуточных значений анимации
animation-fill-mode- отвечает за то будет ли виден эффект от анимации после её завершения