Подкаст CSS – 022: Анимация
Иногда вы видите в интерфейсах маленьких помощников, которые при нажатии предоставляют полезную информацию об этом конкретном разделе. Они часто имеют пульсирующую анимацию, которая незаметно дает вам понять, что информация есть и с ней следует взаимодействовать. В этом модуле показано, как создавать эти помощники и другие анимации с помощью CSS.
Вы можете использовать CSS для установки последовательности анимации с ключевыми кадрами. Эти последовательности могут быть базовыми анимациями с одним состоянием или сложными последовательностями, основанными на времени.
Что такое ключевой кадр?
В большинстве инструментов анимации ключевые кадры — это механизм, который вы используете для назначения состояний анимации временным меткам на временной шкале.
Например, вот временная шкала пульсирующей точки-помощника. Анимация длится 1 секунду и имеет 2 состояния.
Существует определенная точка, в которой каждое из этих состояний анимации начинается и заканчивается. Вы отображаете это на временной шкале с помощью ключевых кадров.
@keyframes
@keyframes
CSS основаны на той же концепции, что и ключевые кадры анимации.
Вот пример с двумя состояниями:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
Первая важная часть — это пользовательский идентификатор ( custom-ident
) , имя правила ключевых кадров. Идентификатор в этом примере — my-animation
. Пользовательский идентификатор работает как имя функции , позволяя вам ссылаться на правило ключевых кадров в другом месте вашего кода CSS.
Внутри правила ключевых кадров from
и to
— это ключевые слова, обозначающие 0%
и 100%
, которые являются началом и концом анимации. Вы можете воссоздать то же правило следующим образом:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Вы можете добавить столько позиций, сколько захотите, на таймфрейме. В примере с пульсирующим помощником есть два состояния, которые преобразуются в два ключевых кадра. Это означает, что у вас есть две позиции внутри правила ключевых кадров для представления изменений для каждого из этих ключевых кадров.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
Свойства animation
Чтобы использовать @keyframes
в правиле CSS, вы можете либо определить различные свойства анимации по отдельности, либо использовать свойство сокращенной animation
.
animation-duration
.my-element {
animation-duration: 10s;
}
Свойство анимации-длительности определяет, какой длины должна быть временная шкала @keyframes
в качестве значения времени. По умолчанию оно равно 0 секундам, что означает, что анимация все еще выполняется, но она будет слишком быстрой, чтобы вы могли ее увидеть. Вы не можете использовать отрицательные значения времени.
animation-timing-function
Чтобы воссоздать естественное движение в анимации, вы можете использовать функции синхронизации, которые вычисляют скорость анимации в каждой точке. Вычисленные значения часто искривлены , что приводит к тому, что анимация выполняется с переменной скоростью в течение animation-duration
и создается впечатление, что элемент подпрыгивает, если браузер вычисляет значение, превышающее значения, определенные в @keyframes
.
В CSS есть несколько ключевых слов, доступных в качестве пресетов, которые используются в качестве значения для функции анимации-тайминга : linear
, ease
, ease-in
, ease-out
, ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Значения функции замедления выглядят кривыми, поскольку замедление рассчитывается с использованием кривой Безье — типа функции, используемой для моделирования скорости. Каждое ключевое слово функции синхронизации, такое как ease
, ссылается на предопределенную кривую Безье. В CSS вы можете определить кривую Безье напрямую с помощью функции cubic-bezier()
, которая принимает четыре числовых значения: x1
, y1
, x2
, y2
.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Эти значения отображают каждую часть кривой вдоль осей X и Y.
Понимание кривых Безье сложно. Визуальные инструменты, такие как генератор Леа Веру, очень полезны.
Функция замедления steps
Иногда вам может потребоваться более детальный контроль над анимацией, перемещаясь интервалами, а не вдоль кривой. Функция замедления steps()
позволяет разбить временную шкалу на определенные интервалы равной продолжительности .
.my-element {
animation-timing-function: steps(10, end);
}
Первый аргумент — количество шагов. Если количество ключевых кадров такое же, как и шагов, каждый ключевой кадр воспроизводится последовательно в течение точной продолжительности своего шага без перехода между состояниями. Если ключевых кадров меньше, чем шагов, браузер добавляет шаги между ключевыми кадрами в зависимости от второго аргумента.
Второй аргумент — направление. Если для него установлено значение end
(по умолчанию), шаги завершаются в конце временной шкалы. Если для него задано значение start
, первый шаг анимации завершается сразу после запуска, то есть он заканчивается на один шаг раньше, чем end
.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Свойствоanimation -iteration-count определяет, сколько раз во время анимации должна запускаться временная шкала @keyframes
. По умолчанию это значение 1, что означает, что анимация останавливается, когда достигает конца временной шкалы. Это значение не может быть отрицательным числом.
Чтобы сделать анимацию зацикленной, установите число итераций на infinite
. Вот как работает пульсирующая анимация в начале этого урока.
animation-direction
.my-element {
animation-direction: reverse;
}
Вы можете установить, в каком направлении будет проходить временная шкала по вашим ключевым кадрам, с помощью анимации-direction , которая принимает следующие значения:
-
normal
: значение по умолчанию, прямое. -
reverse
: выполняется в обратном направлении по временной шкале. -
alternate
: для каждой итерации анимации временная шкала поочередно движется вперед и назад. -
alternate-reverse
: Аналогичноalternate
, но анимация начинается с отсчета времени назад.
animation-delay
.my-element {
animation-delay: 5s;
}
Свойство анимации-задержка определяет, как долго браузер ждет перед запуском анимации. Как и свойство animation-duration
, оно принимает значение времени.
В отличие от animation-duration
, вы можете определить animation-delay
как отрицательное значение, что заставит анимацию начинаться в соответствующей точке вашей временной шкалы. Например, если ваша анимация длится 10 секунд и вы установили animation-delay
на -5s
, анимация начнется с середины вашей временной шкалы.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
Свойство анимации-play-state позволяет воспроизводить и приостанавливать анимацию. Значение по умолчанию — running
. Если вы установите его на paused
, анимация приостановится.
animation-fill-mode
Свойство анимации-fill-mode определяет, какие значения на временной шкале @keyframes
сохраняются до начала анимации или после ее окончания. Значение по умолчанию — none
. Это означает, что после завершения анимации значения на временной шкале отбрасываются. Другие варианты включают в себя:
-
forwards
: последний ключевой кадр сохраняется в зависимости от направления анимации. -
backwards
: первый ключевой кадр сохраняется в зависимости от направления анимации. -
both
: сохраняются как первый, так и последний ключевые кадры.
Сокращение animation
Вместо того, чтобы определять каждое свойство отдельно, вы можете определить их в сокращенной форме animation
, которая позволяет определять свойства анимации в следующем порядке:
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count
-
animation-direction
-
animation-fill-mode
-
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Что следует учитывать при работе с анимацией
Пользователи могут настроить свою операционную систему на ограничение движения при взаимодействии с приложениями и веб-сайтами. Вы можете определить это предпочтение с помощью медиа-запроса «предпочитаете уменьшенное движение» :
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Это не обязательно означает отсутствие анимации. Это предпочтение меньшему количеству анимации, особенно менее неожиданной. Подробнее об этом параметре и общей производительности можно узнать в нашем руководстве по анимации .
Проверьте свое понимание
Проверьте свои знания в области анимации
Чувствительно ли имя или пользовательский идентификатор анимации @keyframes
к регистру?
Ключевые слова from
и to
такие же, как:
0
и 1
start
и end
.0%
и 100%
. animation-timing-function
также широко известна как:
Какое минимальное количество ключевых кадров требуется в анимации @keyframes
?