Свойство CSS animation-timing-function

Свойство animation-timing-function определяет, как анимация развивается на протяжении каждого цикла — не всей анимации в целом. Оно задаёт кривую скорости анимации: скорость, с которой анимируемый элемент перемещается от одного ключевого кадра к следующему.

На этой странице описывается, что делает свойство, все принимаемые им значения (включая cubic-bezier() и steps()), его взаимодействие с @keyframes и сокращением animation, а также типичные ошибки.

Почему функция синхронизации важна

Длительность анимации сообщает, сколько времени занимает цикл; функция синхронизации сообщает, как это время распределяется. При одинаковой длительности в 5 секунд linear движется с постоянной скоростью, тогда как ease начинается медленно, ускоряется в середине и плавно останавливается. Правильный выбор кривой — это разница между движением, которое воспринимается механически, и движением, которое ощущается естественно.

Функции синхронизации определяют интерполяцию между ключевыми кадрами. Это означает, что можно задать разные функции синхронизации для отдельных ключевых кадров внутри @keyframes — функция применяется от этого ключевого кадра до следующего, а не ко всей анимации. Если ключевой кадр не задаёт функцию, для этого интервала используется значение animation-timing-function элемента.

Свойство animation-timing-function является одним из свойств CSS3.

Оно принимает следующие значения:

• ease — (по умолчанию) Начинается медленно, затем ускоряется и заканчивается медленно.
• ease-in — Начинается медленно, но ускоряется к концу.
• ease-out — Начинается быстро, но замедляется к концу.
• ease-in-out — Начинается медленно и заканчивается медленно.
• step-start — Эквивалентно steps(1, start).
• step-end — Эквивалентно steps(1, end).
• linear — Анимация имеет одинаковую скорость на протяжении всей анимации; часто лучше всего подходит для изменений цвета или прозрачности.
• steps(int, start|end) — Задаёт ступенчатую функцию с двумя параметрами. Первый параметр определяет количество интервалов в функции и должен быть больше 0. Второй параметр — значение "start" или "end" — определяет момент изменения значений внутри интервала. Если второй параметр опущен, используется "end".
• cubic-bezier(n,n,n,n) — Задаёт пользовательские значения для функции кубической кривой Безье. Первые два параметра определяют координаты X и должны быть между 0 и 1. Последние два параметра определяют координаты Y и могут быть любыми числами.

Если указаны несколько значений, разделённых запятой, они сопоставляются с соответствующими анимациями, определёнными в animation-name, по порядку. Если функций синхронизации меньше, чем анимаций, список повторяется до совпадения количества.

Понимание cubic-bezier()

Все именованные ключевые слова являются сокращениями для кривой cubic-bezier(). Функция принимает четыре числа — cubic-bezier(x1, y1, x2, y2) — которые представляют собой две контрольные точки кривой Безье, проходящей из (0,0) в (1,1). Ось X — это время (должна оставаться между 0 и 1), ось Y — прогресс анимации (может выходить за пределы ниже 0 или выше 1, создавая эффекты «отскока» или «антиципации»).

Именованные ключевые слова эквивалентны:

• linear → cubic-bezier(0, 0, 1, 1)
• ease → cubic-bezier(0.25, 0.1, 0.25, 1)
• ease-in → cubic-bezier(0.42, 0, 1, 1)
• ease-out → cubic-bezier(0, 0, 0.58, 1)
• ease-in-out → cubic-bezier(0.42, 0, 0.58, 1)

steps() и ступенчатые анимации

В то время как cubic-bezier() создаёт плавное движение, steps() перескакивает между дискретными состояниями — это удобно для анимаций со спрайт-листами или мигания курсора. steps(4, end) делит анимацию на 4 равных скачка; start заставляет первый скачок происходить немедленно, тогда как end (по умолчанию) откладывает его до конца каждого интервала.

Типичные ошибки

• Не наследуется и не анимируется. Нельзя анимировать саму функцию синхронизации.
• Порядок важен в сокращении. Внутри сокращения animation функция синхронизации и animation-delay — оба значения типа <time>-или-ключевое-слово; первое значение <time> читается как длительность, второе — как задержка, поэтому функцию синхронизации следует указывать перед значением задержки.
• Функции в ключевых кадрах имеют приоритет. Функция синхронизации, объявленная в ключевом кадре внутри @keyframes, переопределяет значение свойства для этого сегмента.

Синтаксис

Синтаксис свойства CSS animation-timing-function

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)  | initial | inherit;

Пример свойства animation-timing-function со значением "ease":

Пример свойства CSS animation-timing-function со значением ease

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        position: relative;
        animation: element 5s infinite;
        animation-timing-function: ease;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div></div>
  </body>
</html>

Пример свойства animation-timing-function со значением "ease-in":

Пример свойства CSS animation-timing-function со значением ease-in

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #8ebf42;
        position: relative;
        animation: element 7s infinite;
        animation-timing-function: ease-in;
      }
      @keyframes element {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h1>The animation-timing-function Property</h1>
    <div></div>
  </body>
</html>

Пример свойства animation-timing-function с различными функциями синхронизации:

Пример свойства CSS animation-timing-function со значениями linear, ease, ease-in, ease-out и ease-in-out

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #1c87c9;
        color: #eee;
        font-weight: bold;
        position: relative;
        text-align: center;
        padding: 8px;
        animation: mymove 5s infinite;
      }
      #div1 {
        animation-timing-function: linear;
      }
      #div2 {
        animation-timing-function: ease;
      }
      #div3 {
        animation-timing-function: ease-in;
      }
      #div4 {
        animation-timing-function: ease-out;
      }
      #div5 {
        animation-timing-function: ease-in-out;
      }
      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-timing-function example</h2>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
  </body>
</html>

Значения

Связанные свойства

• animation — сокращение, задающее функцию синхронизации вместе с именем, длительностью, задержкой и другими параметрами.
• @keyframes — где определяются остановки анимации, между которыми выполняет интерполяцию функция синхронизации.
• animation-duration — задаёт продолжительность одного цикла; функция синхронизации распределяет движение в рамках этого цикла.
• animation-name — связывает элемент с правилом @keyframes.
• transition-timing-function — та же концепция кривой скорости, применённая к переходам вместо анимаций по ключевым кадрам.

Практика