Анимации

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

Свойство анимации-итерации-счет определяет, сколько раз временная шкала @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;
  }
}

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

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

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