w3docs logo

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

Свойство animation-timing-function устанавливает, как должна прогрессировать анимация в течении каждого цикла, а не в течении всей анимации.

Может иметь следующие значения:

  • 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) - определяет значения в кубической функции Безье. Функция допускает числовые значения от 0 до 1.
Значение по умолчанию ease
Применяется Ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется No
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.animationTimingFunction = "linear";

Синтаксис

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;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      div {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #1c87c9;
      position: relative;
      -webkit-animation: element 5s infinite; /* Safari 4.0 - 8.0 */
      -webkit-animation-timing-function: ease; /* Safari 4.0 - 8.0 */
      animation: element 5s infinite;
      animation-timing-function: ease;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
      @keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства animation-timing-function </h2>
    <div></div>
  </body>
</html>

Пример с применением значения "ease-in":

Пример

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div {
      width: 100px;
      height: 100px;
      background: #8ebf42;
      position: relative;
      -webkit-animation: element 7s infinite; /* Safari 4.0 - 8.0 */
      -webkit-animation-timing-function: ease-in; /* Safari 4.0 - 8.0 */
      animation: element 7s infinite;
      animation-timing-function: ease-in;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
      @keyframes element {
      from {left: 0px;}
      to {left: 200px;}
      }
    </style>
  </head>
  <body>
    <h1>Пример свойства animation-timing-function</h1>
    <div></div>
  </body>
</html>

Пример, где применены разные значения:

Пример

<!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;
      -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
      animation: mymove 5s infinite;
      }
      /* Safari 4.0 - 8.0 */
      #div1 {-webkit-animation-timing-function: linear;}
      #div2 {-webkit-animation-timing-function: ease;}
      #div3 {-webkit-animation-timing-function: ease-in;}
      #div4 {-webkit-animation-timing-function: ease-out;}
      #div5 {-webkit-animation-timing-function: ease-in-out;}
      #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;}
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
      @keyframes mymove {
      from {left: 0px;}
      to {left: 300px;}
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства animation-timing-function</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>

Значения

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

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

chrome firefox safari opera
43.0+
4.0-42.0 -webkit- 		16.0+
5.0-15.0 -moz- 		9.0+
5.1-8.0 -webkit- 		12.0+
15.0-29.0 -webkit-

Практикуйте свои знания

Какие значений может иметь свойство animation-timing-function в CSS?
Считаете ли это полезным?