Несколько уроков назад мы рассматривали тему CSS-переходов (свойство transition), которые позволяют добавлять плавность при изменении многих CSS-свойств элементов. Но в плавных переходах есть несколько минусов:
- позволяют осуществить переход лишь между двумя состояниями – начальный и конечным. Ни о каком промежуточном состоянии не может быть и речи;
- как правило, применяются для одноразового анимационного эффекта при смене состояний элемента. Просто так, например, при прокрутке страницы либо по какому-либо другому условию анимированный переход не произойдет.
CSS-анимация придаёт сайтам намного большую динамичность, оживляя веб-страницы и значительно улучшая взаимодействие с пользователем. В отличие от CSS переходов, анимация базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
Анимация может применяться практически для всех html-элементов, а также для псевдоэлементов ::before и ::after. Список CSS-свойств, которые поддерживают анимация, точно такой же, как и у плавных переходов и основан на принципе: если изменение свойства можно как-то математически представить, то оно подлежит анимации.
В целом процесс создания CSS-анимации состоит из двух частей:
- создание ключевых кадров keyframes;
- задание параметров самой анимации.
Создание ключевых кадров.
Создание анимации начинается с написания CSS-правила @keyframes, в котором задается имя анимации и ключевые кадры. Кадры определяют, какие свойства на каком шаге будут анимированы.
Общий синтаксис создания ключевых кадров анимации следующий:
@keyframes myAnim {
0% {
width: 100px;
background-color: red;
}
100% {
width: 200px;
background-color: blue;
}
}
В данном примере в CSS-правиле @keyframes я задал имя анимации myAnim и создал 2 ключевых кадра: один в начальной стадии, второй – в завершающей. Т.е. за время анимации происходит изменение ширины элемента со 100 пикселей до 200 и цвета фона с красного на синий.
Для каждой анимации нужно задать как минимум 2 ключевых кадра: начальный и конечный. Для этого помимо значений 0% и 100% можно использовать зарезервированные слова from и to. Также можно описать промежуточные ключевые кадры, которые задаются с помощью процентов. Например: 10%, 33%, 48%, 59%, 75%, 89% и т.д.
Если не задан начальный ключевой кадр, то анимация будет проигрываться из исходного стилевого состояния элемента к ближайшему шагу из перечисленных в keyframes и далее.
Если не задан конечный кадр, то после достижения последнего промежуточного шага, анимация проиграется в обратном направлении до достижения изначального состояния элемента.
Ключевые кадры внутри keyframes могут быть написаны в произвольном порядке, но лучше их перечислять по хронологии от меньшего к большему.
Группировка ключевых кадров.
Ключевые кадры можно группировать. Для этого нужно перечислить их через запятую.
@keyframes myAnim {
0%, 50% {
width: 100px;
}
100% {
width: 200px;
}
}
В этом примере первые два кадра сгруппированы. Анимируемый элемент сначала изменит свою ширину до 100px и останется в этом состоянии половину времени анимации. А за вторую половину времени он растянется от 100px до 200px.
Название анимации animation-name.
После создания правила @keyframes мы можем обращаться к нему при помощи свойства animation-name. Например:
div {
animation-name: myAnim;
}
Свойство animation-duration задает продолжительность анимации.
Можно задавать в секундах или миллисекундах. Например:
div {
animation-name: myAnim;
animation-duration: 2s;
}
Свойство animation-timing-function – задает временную функцию анимации.
Свойство определяет, как будет происходить анимация: с какой скоростью и ускорением будут меняться свойства, задействованные в ней.
Как и в плавных переходах, доступны 5 стандартных значений (ease, linear, ease-in, ease-out, ease-in-out), специальная функция cubic-bezier, а также возможность задать шаги анимации при помощи функций steps, step-start (аналогично steps(1, start)) и step-end (аналогично steps(1, end)).
Например:
div {
animation-name: myAnim;
animation-duration: 2s;
animation-timing-function: linear;
}
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
Свойство animation-delay – устанавливает задержку анимации.
Свойство игнорирует анимацию заданное количество времени, что даёт возможность по отдельности запускать каждую анимацию. Задается в секундах или миллисекундах.
Например:
div {
animation-name: myAnim;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
}
Можно установить отрицательную задержку – тогда анимация начнется с определенного момента внутри её цикла, т.е. со времени, указанного в задержке.
Например, чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration. Применение задержки с отрицательным значением позволяет применять анимацию к нескольким элементам со сдвигом фазы.
Свойство animation-iteration-count.
Свойство позволяет запустить анимацию несколько, указав в его значении целое положительное число. Значение по умолчанию 1. Дробные значения больше 1 будут воспроизводить анимацию, обрезая её на части следующей итерации, а значение 0 или любое отрицательное число удаляют анимацию из проигрывания.
Также в качестве значения может быть использовано служебное слово infinite. Оно означает, что анимация будет выполняться бесконечно и никогда не завершится.
Например:
div {
animation-name: myAnim;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;
}
Свойство animation-direction задает направление повтора анимации.
Помимо количества проигрываний анимации, мы можем определить её направление.
По умолчанию анимация имеет прямое направление (animation-direction: normal) и проигрывается в обычном направлении, с начала и до конца.
Знаечние reverse задает обратный порядок анимации, чтобы проигрывание начиналось с конца и шло к началу (то есть за начальную точку считается кадр to, а за конечную - from).
Есть еще 2 значения, которые используются только тогда, когда количество проигрываний анимации больше одного. Они определяют чередующееся направление анимации:
- alternate - нечётные проигрывания будут выполняться в прямом направлении, а чётные — в обратном;
- alternate-reverse - нечётные проигрывания наоборот будут выполняться в обратном направлении, а чётные - в прямом.
Например:
div {
animation-name: myAnim;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
}
Состояние до и после анимации: animation-fill-mode.
Свойство определяет, будет ли видимым эффект от анимации, когда анимация не началась или уже закончилась.
Возможные значения:
- forwards - элемент будет сохранять состояние после завершения анимации;
- backwards - стили, описанные в первом ключевом кадре (from или 0%), будут применены сразу, ещё до начала проигрывания анимации;
- both - объединяет действия forwards и backwards. То есть до начала анимации элементу присваивается состояние первого ключевого кадра, а после завершения - конечное состояние анимации сохраняется;
- none - значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
div {
animation-name: myAnim;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
Остановка и запуск анимации: animation-play-state.
С помощью свойства animation-play-state можно поставить анимацию «на паузу», а потом возобновить с места остановки.
Свойство принимает два значения running и paused. Первое приостанавливает анимацию, а второе начинает или возобновляет анимацию, поставленную на паузу. Значение running задано по умолчанию.
Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект - в состояние :hover.
Краткое свойство animation.
Все параметры воспроизведения анимации можно объединить в одном свойстве - animation, перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
Для воспроизведения анимации достаточно указать только два свойства - animation-name и animation-duration, остальные свойства примут значения по умолчанию.
Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay.
Множественные анимации.
Для одного элемента можно задавать несколько анимаций, либо перечислив их параметры через запятую в отдельных свойствах анимации, либо перечислив анимации через запятую в коротком свойстве animation.
Например, есть 2 анимации:
@keyframes myAnim1 {
to { left: 100px; }
}
@keyframes myAnim2 {
to { width: 100px; }
}
Пример полной записи:
.element {
animation-name: myAnim1, myAnim2;
animation-duration: 5s, 6s;
}
Пример короткой записи:
div {
animation: myAnim1 5s, myAnim2 6s;
}
