Анимации

Анимация — отличный способ выделить интерактивные элементы и добавить интереса и веселья в ваши проекты. В этом модуле вы узнаете, как добавлять эффекты анимации и управлять ими с помощью CSS.

Иногда на интерфейсах вы видите маленьких помощников, которые предоставляют полезную информацию о разделе, в котором они находятся, когда вы нажимаете на них. Они часто имеют пульсирующую анимацию, которая незаметно дает вам понять, что информация находится там и с ней следует взаимодействовать. В этом модуле показано, как создавать эти помощники и другие анимации с помощью CSS.

Пульсирующие значки — один из способов привлечь внимание пользователей к важной информации.

Вы можете использовать CSS для установки последовательности анимации с ключевыми кадрами. Эти последовательности могут быть базовыми анимациями с одним состоянием или сложными последовательностями, основанными на времени.

Что такое ключевой кадр?

В большинстве инструментов анимации ключевые кадры — это механизм, который вы используете для назначения состояний анимации временным меткам на временной шкале.

Например, вот временная шкала пульсирующей точки-помощника. Анимация длится 1 секунду и имеет 2 состояния.

Состояния пульсирующей анимации.

Существует определенная точка, в которой каждое из этих состояний анимации начинается и заканчивается. Вы отображаете это на временной шкале с помощью ключевых кадров.

Пульсирующая анимация с ключевыми кадрами.

@keyframes

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

@keyframes CSS основаны на той же концепции, что и ключевые кадры анимации.

Вот пример с двумя состояниями:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

Первая важная часть — это пользовательский идентификатор ( custom-ident ) , имя правила ключевых кадров. Идентификатор в этом примере — my-animation . Пользовательский идентификатор работает как имя функции , позволяя вам ссылаться на правило ключевых кадров в другом месте вашего кода CSS.

Примечание. <custom-ident> используется в различных местах CSS, чтобы вы могли указать собственное имя для вещей. Эти идентификаторы чувствительны к регистру, и в некоторых случаях есть слова, которые нельзя использовать. Например, при именовании строк в CSS Grid нельзя использовать слово span .

Внутри правила ключевых кадров 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;
  }
}

Попробуйте отредактировать правило pulse , чтобы увидеть, как изменится анимация.

Свойства animation

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

Чтобы использовать @keyframes в правиле CSS, вы можете либо определить различные свойства анимации по отдельности, либо использовать свойство сокращенной animation .

animation-duration

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

.my-element {
    animation-duration: 10s;
}

Свойство анимации-duration определяет, какой длины должна быть временная шкала @keyframes в качестве значения времени. По умолчанию оно равно 0 секундам, что означает, что анимация все еще выполняется, но она будет слишком быстрой, чтобы вы могли ее увидеть. Вы не можете использовать отрицательные значения времени.

animation-timing-function

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

Чтобы воссоздать естественное движение в анимации, вы можете использовать функции синхронизации, которые вычисляют скорость анимации в каждой точке. Вычисленные значения часто искривлены , что приводит к тому, что анимация выполняется с переменной скоростью в течение 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

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

.my-element {
    animation-iteration-count: 10;
}

Свойство анимации-итерации-счет определяет, сколько раз временная шкала @keyframes должна запускаться во время анимации. По умолчанию это значение 1, что означает, что анимация останавливается, когда достигает конца временной шкалы. Это значение не может быть отрицательным числом.

Попробуйте изменить количество итераций для этой анимации.

Чтобы сделать анимацию зацикленной, установите число итераций на infinite . Вот как работает пульсирующая анимация в начале этого урока.

Пульсирующая анимация повторяется бесконечно.

animation-direction

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

.my-element {
    animation-direction: reverse;
}

Вы можете установить, в каком направлении будет проходить временная шкала по вашим ключевым кадрам, с помощью анимации-direction , которая принимает следующие значения:

• normal : значение по умолчанию, прямое.
• reverse : выполняется в обратном направлении по временной шкале.
• alternate : для каждой итерации анимации временная шкала поочередно движется вперед и назад.
• alternate-reverse : Аналогично alternate , но анимация начинается с отсчета времени назад.

Попробуйте изменить направление анимации.

animation-delay

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

.my-element {
    animation-delay: 5s;
}

Свойство анимации-задержки определяет, как долго браузер ждет перед запуском анимации. Как и свойство animation-duration , оно принимает значение времени.

В отличие от animation-duration , вы можете определить animation-delay как отрицательное значение, что заставит анимацию начинаться в соответствующей точке вашей временной шкалы. Например, если ваша анимация длится 10 секунд и вы установили animation-delay на -5s , анимация начнется с середины вашей временной шкалы.

Попробуйте изменить задержку анимации.

animation-play-state

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

.my-element:hover {
    animation-play-state: paused;
}

Свойство анимации-play-state позволяет воспроизводить и приостанавливать анимацию. Значение по умолчанию — running . Если вы установите его на paused , анимация приостановится.

Удерживайте курсор над анимированным элементом, чтобы приостановить анимацию.

animation-fill-mode

Поддержка браузера

• 43
• 12
• 16
• 9

Источник

Свойство анимации-fill-mode определяет, какие значения на временной шкале @keyframes сохраняются до начала анимации или после ее окончания. Значение по умолчанию — none . Это означает, что после завершения анимации значения на временной шкале отбрасываются. Другие варианты включают в себя:

• forwards : последний ключевой кадр сохраняется в зависимости от направления анимации.
• backwards : первый ключевой кадр сохраняется в зависимости от направления анимации.
• both : сохраняются как первый, так и последний ключевые кадры.

Попробуйте изменить режим заливки.

Сокращение animation

Вместо того, чтобы определять каждое свойство отдельно, вы можете определить их в сокращенной форме animation , которая позволяет определять свойства анимации в следующем порядке:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. 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 к регистру?

Да

🎉

Нет

CSS не позволяет двум анимациям иметь одно и то же имя, но позволяет SWOOP и swoop сосуществовать.

Ключевые слова from и to такие же, как:

start и end .

Попробуйте еще раз!

0% и 100% .

from соответствует 0% , а to соответствует 100%.

0 и 1

Попробуйте еще раз!

animation-timing-function также широко известна как:

Динамическое время

Попробуйте еще раз!

Задерживать

Попробуйте еще раз!

Ослабление

🎉

Какое минимальное количество ключевых кадров требуется в анимации @keyframes ?

1

Браузер будет воспринимать текущее состояние элемента как ключевой кадр, поэтому требуется как минимум 1 ключевой кадр.

2

Попробуйте еще раз!

3

Попробуйте еще раз!

4

Попробуйте еще раз!