Мы подробно рассмотрели много интересных тем! Надеюсь, они стали понятнее.
Должен признаться, что при написании этого курса мне потребовалось какое-то время, чтобы разобраться в анимации и ключевых кадрах. Если вам пока не всё понятно, постарайтесь не расстраиваться. Продолжайте в том же духе, и постепенно различные приёмы использования анимации в HTML и CSS станут очевидными.
В этой главе мы немного подведём итог пройденному. Но сначала рассмотрим домашнее задание!
Челлендж: светофор
Я создал обновлённую версию демонстрации светофора, на этот раз изменив последовательность, чтобы убрать стадию «красный + жёлтый».
Посмотреть пример в действии можно здесь. Я привёл цветовую схему в соответствие с тем, как, по мнению Google, должны выглядеть американские светофоры.
Обзор анимации
В этом разделе мы рассмотрели свойство animation и как оно работает совместно с @keyframes.
Как переход, только иначе
Хотя свойство animation выглядит и работает подобно transition, у него есть несколько мелких отличий. Переход происходит только при изменении элемента, в то время как анимация может начаться сразу же.
Используя различные свойства, анимация может повторяться указанное количество раз (или бесконечно), и даже может начинаться с отрицательным значением задержки. В этом случае анимация запускается не с начала, а с пройденного места.
По умолчанию анимация воспроизводится от начала и до конца, а затем переходит в состояние по умолчанию. Мы можем заставить анимацию застыть в конечной точке, с помощью свойства animation-direction со значением forwards.
Анимации, как и переходы, используют функцию времени. Однако она применяется к каждому отдельному ключевому кадру, а не ко всему набору ключевых кадров. Для более точного контроля можно указать функцию animation-timing-function внутри ключевого кадра.
Наконец, анимацию можно задать в сокращённом виде, подобно переходам:
animation: keyframe-name 2s forwards linear;
Ключевые кадры
Каждая анимация должна ссылаться на набор @keyframes. Эти ключевые кадры представляют собой серию процентов, описывающих каждый «этап» анимации. Браузер автоматически заполняет промежутки между ними.
У ключевых кадров есть собственное сокращение (to и from), когда вы хотите только перейти из одного состояния в другое.
Если поставить проценты рядом друг с другом, анимация на этом этапе может «приостановиться».
Наконец, вы можете опустить ключевой кадр 0%, и браузер примет стиль элемента как заданный. Например, чтобы что-то исчезло, не обязательно задавать ему значение opacity как 1 (при условии, что элемент уже виден):
@keyframes name {
100% {
opacity: 0;
}
}
Соединим всё вместе
Когда мы хотим использовать анимацию, у нас всегда будет две части:
.element {
animation: keyframe-name ...
}
@keyframes keyframe-name {
...
}
Домашнее задание
К этому моменту мы должны понимать разницу между свойствами animation и transition.
Взгляните на некоторые примеры из «Принципов анимации для веб-страниц». Каждый из них полностью создан на HTML и CSS с использованием анимации ключевых кадров. Попробуйте переделать один из примеров и посмотреть, что с ним можно сделать.