Анимации

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

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

Свойство анимации-duration определяет, какой длины должна быть временная шкала @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 , которая позволяет определять свойства анимации в следующем порядке:

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;
  }
}

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

Проверьте свое понимание

Проверьте свои знания в области анимации