Прежде чем приступить к примерам анимации, давайте рассмотрим свойства анимации отдельно.
Как и transition, свойство animation может быть записано сокращённо, либо любое из этих свойств может быть указано отдельно.
animation-delay
Подобно свойству transition-delay, мы можем использовать animation-delay, чтобы заставить анимацию ожидать перед её началом. Это может быть особенно полезно в ситуациях, когда выполняется несколько анимаций.
Если анимация зацикливается, то задержки при каждом цикле не происходит. Задержка действует только в момент применения анимации к элементу.
Этому свойству можно задать отрицательное значение, например -1s. Это приведёт к тому, что анимация начнётся так, будто секунда уже прошла.
animation-direction
Обычно анимация начинается с 0% и заканчивается на 100%. Используя animation-direction мы контролируем направление с помощью значений normal, reverse, alternate и alternate-reverse.
Значение reverse заставляет анимацию воспроизводиться (и зацикливаться) от 100% к 0%, а alternate — от 0% к 100% и обратно к 0%.
animation-duration
Это длительность анимации. Подобно transition-duration, свойство animation-duration принимает значение 1s для одной секунды или 200ms для двухсот миллисекунд.
animation-fill-mode
По умолчанию, анимация воспроизводится, а затем элемент возвращается в своё обычное состояние. Используя animation-fill-mode мы можем заставить анимацию «замереть» в конечном или начальном состоянии.
Значение forwards означает, что анимация завершится и останется на последнем ключевом кадре. Значение backwards возвращает к первому ключевому кадру после завершения анимации.
Примером может служить анимация попрыгунчика на сайте Hop.ie. Анимация воспроизводится один раз и завершается на последнем кадре, при этом используется значение forwards.
animation-iteration-count
Это свойство указывает, сколько раз проигрывать анимацию. По умолчанию она воспроизводится один раз. Вы можете указать число или значение infinite, чтобы анимация повторялась вечно.
animation-name
animation-name указывает на @keyframes, связанным с этой анимацией. К примеру, если значение animation-name установлено как foo, будет использоваться такой набор ключевых кадров:
@keyframes foo {
...
}
animation-play-state
Если вам понадобится приостановить или возобновить анимацию, то свойство animation-play-state позволит вам это сделать. Оно принимает значения running (по умолчанию) или paused. Одна из идей — установить значение для анимации с помощью JavaScript.
animation-timing-function
Это свойство принимает те же значения, что и свойство функции времени в переходах, но ведёт себя несколько иначе. В то время как функция времени, например ease-out, применяется ко всему переходу, функция времени в анимации применяется между каждым ключевым кадром.
Это означает, что в следующих ключевых кадрах анимация начнётся быстро и замедлится к 50%, а затем наберёт скорость и замедлится к 100%.
@keyframes foo {
0% {
/* Анимация начинается быстро, а ease-out заставляет её замедлиться к 50% */
}
50% {
/* Опять же, начинается быстро и замедляется к 100% */
}
100% {
/* Финиш */
}
}
С этим может быть сложно работать. Часто при создании анимации с ключевыми кадрами я выбираю функцию времени linear и регулирую темп анимации с помощью @keyframes.
Тем не менее, функции времени cubic-bezier могут создавать замечательные эффекты при работе с анимацией, так что стоит их попробовать.
Использование функций времени в @keyframes
Когда вы указываете функцию времени, она применяется к каждому ключевому кадру анимации. Это означает, что если вы укажете четыре ключевых кадра, то функция времени будет применяться к каждому из них. Функция ease-out будет замедляться по мере приближения к каждому ключевому кадру.
По этой причине мы обычно определяем функцию времени для анимации как линейную и контролируем темп на основе каждого ключевого кадра:
@keyframes my-animation {
0% {
...
animation-timing-function: linear;
}
50% {
...
animation-timing-function: ease-out;
}
}
В данном случае первая половина анимации будет линейной, а во второй половине будет использоваться функция времени ease-out.
Домашнее задание
Я создал простую анимацию с ключевыми кадрами на CodePen здесь. Свойства перечислены в CSS. Попробуйте изменить некоторые из этих свойств и посмотрите что получится.