Анимация — отличный способ выделить интерактивные элементы и добавить интереса и веселья в ваши проекты. В этом модуле вы узнаете, как добавлять эффекты анимации и управлять ими с помощью CSS.
Иногда в интерфейсах вы видите маленьких помощников, которые при нажатии предоставляют некоторую полезную информацию об этом конкретном разделе. Они часто имеют пульсирующую анимацию, которая незаметно дает вам понять, что информация находится там и с ней следует взаимодействовать. Но как это сделать с помощью CSS?
В CSS вы можете создать анимацию этого типа, используя анимацию CSS, которая позволяет вам устанавливать последовательность анимации с использованием ключевых кадров. Анимации могут быть простыми, с одним состоянием или даже сложными, основанными на времени последовательностями.
Что такое ключевой кадр?
В программном обеспечении для анимации, CSS и большинстве других инструментов, которые позволяют анимировать что-либо, ключевые кадры — это механизм, который вы используете для назначения состояний анимации временным меткам на временной шкале.
Давайте используем для этого «пульсатор» в качестве контекста. Вся анимация длится 1 секунду и проходит в двух состояниях.
Существует определенная точка, в которой каждое из этих состояний анимации начинается и заканчивается. Вы отображаете это на временной шкале с помощью ключевых кадров.
@keyframes
Теперь вы знаете, что такое ключевой кадр, и эти знания помогут вам понять, как работает правило CSS @keyframes . Вот основное правило с двумя состояниями.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
Первая часть, на которую следует обратить внимание, — это пользовательский идентификатор (пользовательский идентификатор) — или, говоря более человеческим языком, имя правила ключевых кадров. Идентификатор этого правила — 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);
}
Первый аргумент — сколько шагов. Если количество шагов определено как 10 и имеется 10 ключевых кадров, каждый ключевой кадр будет воспроизводиться последовательно в течение точного времени без перехода между состояниями. Если для шагов недостаточно ключевых кадров, шаги между ключевыми кадрами добавляются в зависимости от второго аргумента.
Второй аргумент — направление. Если для него установлено значение end (по умолчанию), шаги завершаются в конце временной шкалы. Если для него установлено значение start , первый шаг анимации завершается сразу после запуска, то есть он заканчивается на один шаг раньше, чем end .
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Свойство анимации-итерации-счет определяет, сколько раз должна запускаться временная шкала @keyframes . По умолчанию это 1, что означает, что когда анимация достигнет конца вашей временной шкалы, она остановится в конце. Число не может быть отрицательным числом.
Вы можете использовать ключевое слово infinite , которое будет зацикливать вашу анимацию, как это работает в демо «пульсатора» из начала этого урока.
animation-direction
.my-element {
animation-direction: reverse;
}
Вы можете установить, в каком направлении временная шкала будет проходить по вашим ключевым кадрам, с помощью анимации-направления :
-
normal: значение по умолчанию, то есть вперед. -
reverse: работает в обратном направлении по временной шкале. -
alternate: для каждой итерации анимации временная шкала будет последовательно перемещаться вперед или назад. -
alternate-reverse: обратныйalternate.
animation-delay
.my-element {
animation-delay: 5s;
}
Свойство анимации-delay определяет, как долго ждать перед запуском анимации. Как и свойство animation-duration , оно принимает значение времени.
В отличие от свойства animation-duration , вы можете определить это отрицательное значение. Если вы установите отрицательное значение, временная шкала в ваших @keyframes начнется с этой точки. Например, если ваша анимация длится 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: следует правилам как дляforwardsтак иbackwards.
Сокращение 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 чувствителен к регистру?
SWOOP и swoop сосуществовать. Ключевые слова from и to такие же, как и
start и end .0% и 100% .from соответствует 0% , а to соответствует 100%.0 и 1 animation-timing-function также широко известна как
Какое минимальное количество ключевых кадров требуется в анимации @keyframes ?