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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
animation-timing-functioncss343.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.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>
Пример использования CSS свойства animation-timing-function.
Пример использования CSS свойства animation-timing-function.

Рассмотрим пример пошаговой анимации и укажем, что на каждую часть ключевого кадра будет произведено 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 свойства animation-timing-function.
Пример использования CSS свойства animation-timing-function.
CSS свойства