Для создания анимации по кадрам используется описание кадров с помощью @keyframes. Данное свойство — это контейнер, куда пользователь прописывает изменения в кадрах с стилях CSS. Браузер вычисляет разницу в стилях и на этом строит анимацию, плавно изменяя значение свойств в заданных пределах.

При данном коде в начале анимации элементу будет присвоен стиль margin-left: 5px, а конечным значением будет margin-left: 100px.

Для того, чтобы анимация сработала, необходимо название анимации добавить тому элементу, который требует анимации. Существует две формы записи анимации, сокращенная:

здесь

• animation— ключевое слово
• y1 — название анимации
• 4s — продолжительность анимации( 4 секунды)
• 3 — количество повторений

Полная форма записи анимации выглядит так:

Как вы догадались, анимировать будем элементы, которым присвоен класс .one.

Параметры анимации

Рассмотрим значения параметров анимации поподробнее:

• @keyframes — блок, в который записывается раскадровка анимации.
• animation — свойство, которое позволяет в сокращенной форме записывать параметры анимации.
• animation-name — имя блока @keyframes анимации
• animation-duration — длительность анимации в секундах.
• animation-timing-function — функция изменения параметров. По умолчанию имеет значение ease.
• animation-delay — временная задержка перед выполнением анимации.
• animation-iteration-count — количество циклов анимации, которые будут проиграны. Если установить infinite — то анимация будет бесконечной.
• animation-direction — направление анимации. Можно задавать alternate направления для четных и нечетных итераций будет отличаться. По умолчанию стоит значение normal.

О раскадровке

С помощью директивы @keyframes можно задавать подробную раскадровку анимации:

или использовать сокращенную запись, которая указывает начальную точку анимации: from и конечную to

animation-timing-function

Скорость изменения параметров, которые можно задать:

• linear — скорость изменений одинакова на всем протяжении анимации
• ease — значение по умолчанию. Медленный старт, ускорение и замедление перед окончанием.
• ease-in — анимация с медленным изменением параметров в начале работы.
• ease-out — анимация с медленным изменением параметров на финише.
• ease-in-out— медленный старт и окончание анимации.
• cubic-bezier(n,n,n,n) — задание своих значений кривой изменения скорости. Параметр n — число от 0 до 1.
• initial — установить значение по умолчанию
• inherit — наследовать функцию от родителя.

Анимацию можно строить и без применения свойства animation. Часто для анимации используют псевдоклассы.