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

Определение и применение

CSS свойство animation-timing-function определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой.

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animation, чтобы установить все свойства анимации в одном объявлении.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation-timing-function	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

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-name:"animationName1, animationName2, animationName3";
animation-timing-function:"linear, ease, ease-in";

/* Если для конкретного кадра вам необходимо определить собственную временную функцию,
то определите её в коде этого кадра: */
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px; animation-timing-function:: linear;} 
	75%  {left: 200px;} 
	100% {left: 0px; } 
	}

JavaScript синтаксис:

object.style.animationTimingFunction = "ease"

Значения свойства

Значение	Описание
ease	Эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1). Это значение по умолчанию.
linear	Определяет эффект анимации с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1). Точка 1 расположена на 0 по оси x и по оси y, точка 2 — на 1 по оси x и по оси y.
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). Точка 1 расположена на 0,42 по оси x и на 0 по оси y, точка 2 — на 0,58 по оси x и на 1 по оси y.
cubic-bezier(n,n,n,n)	Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1 ( Первые два значения — координаты x и y первой точки, а вторые два значения — координаты x и y второй точки). На данном сайте вы сможете подобрать оптимальные для Вас значения.
steps(int,start\|end)	Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0)). Второй параметр является необязательным и имеет значения "start" или "end" и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение "end". Значение "start" осуществляет переход в начале каждого шага, а "end" в конце каждого шага.
step-start	Значение эквивалентно steps(1, start). Свойство сразу принимает конечное значение шага в ключевом кадре.
step-end	Значение эквивалентно steps(1, end). Свойство принимает конечное значение в конце шага.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Скорость анимации в CSS</title>
<style> 
div {
width: 45px; /* устанавливаем ширину блока */
height: 45px;  /* устанавливаем высоту блока */
color : white; /* устанавливаем цвет шрифта белый */
background : green; /* устанавливаем цвет заднего фона */
margin-bottom : 5px; /* устанавливаем отступ от нижнего края элемента */
position: relative;  /* элемент с относительным позиционированием */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s;  /* задаём продолжительность анимации */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
.test {
animation-timing-function: ease; /* эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется  */ 
}
.test2 {
animation-timing-function: linear; /* эффект анимации с одинаковой скоростью от начала до конца */ 
}
.test3 {
animation-timing-function: ease-in; /* эффект анимации с медленного старта */ 
}
.test4 {
animation-timing-function: ease-out; /* эффект анимации с медленным окончанием */ 
}
.test5 {
animation-timing-function: ease-in-out; /* эффект перехода с медленным стартом и медленным окончанием */ 
}
.test6 {
animation-timing-function: cubic-bezier(.94,.06,.83,.67); /* пользовательские значения в кубической функции Безье */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px;} 
	75%  {left: 200px;} 
	100% {left: 0px;} 
	} 
</style>
</head>
	<body>
		<div class = "test">ease</div>
		<div class = "test2">linear</div>
		<div class = "test3">ease-in</div>
		<div class = "test4">ease-out</div>
		<div class = "test5">ease-in-out</div>
		<div class = "test6">cubic-bezier</div>
	</body>
</html>

Рассмотрим пример пошаговой анимации и укажем, что на каждую часть ключевого кадра будет произведено 3 шага (начало точки ключевого кадра/конец точки ключевого кадра), либо 1 шаг (точки ключевого кадра/конец точки ключевого кадра):

<!DOCTYPE html>
<html>
<head>
<title>Пример пошаговой анимация в CSS</title>
<style> 
div {
width: 70px; /* устанавливаем ширину блока */
height: 70px;  /* устанавливаем высоту блока */
color : white; /* устанавливаем цвет шрифта белый */
background : green; /* устанавливаем цвет заднего фона */
margin-bottom : 5px; /* устанавливаем отступ от нижнего края элемента */
position: relative;  /* элемент с относительным позиционированием */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
animation-duration: 5s;  /* задаём продолжительность анимации */
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
.test {
animation-timing-function: steps(3, end); /* указывает пошаговую функцию  */ 
}
.test2 {
animation-timing-function: steps(3, start); /* указывает пошаговую функцию */ 
}
.test3 {
animation-timing-function: step-start; /* указывает пошаговую функцию - эквивалент steps(1, start) */ 
}
.test4 {
animation-timing-function: step-end; /* указывает пошаговую функцию - steps(1, end) */ 
}
@keyframes iliketomoveit {
	0%   {left: 0px;} 
	25%  {left: 400px;} 
	75%  {left: 200px;} 
	100% {left: 0px;} 
	} 
</style>
</head>
	<body>
		<div class = "test">steps(3, end)</div>
		<div class = "test2">steps(3, start)</div>
		<div class = "test3">step-start</div>
		<div class = "test4">step-end</div>
	</body>
</html>

CSS свойства