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

css-свойство animation-timing-function (от англ. animation timing function – временна́я функция анимации) позволяет управлять плавностью анимации (скоростью переходов от одного состояния к другому), используя различные значения математической функции Безье, а также значения пошаговой функции.

Характеристики

Значение по умолчанию: ease.
Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.animationTimingFunction="value".

Синтаксис

Значения

cubic-bezier(n1,n2,n3,n4) – поведение анимации будет зависеть от результата вычисления функции Безье, в качестве аргументов которой можно задавать четыре числа от нуля до единицы включительно.
ease – соответствует результату функции cubic-bezier(0.25,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) (анимация медленно стартует и медленно заканчивается).
linear – соответствует результату функции cubic-bezier(0,0,1,1) (постоянная скорость на всем промежутке воспроизведения).
steps(n, start || end) – здесь n представляет собой положительное целое число, которое задает число шагов функции, а ключевые слова определяют когда эти шаги будут сделаны – в начале или в конце указанного промежутка времени.
step-start – соответствует результату функции step(1,start) (стилевые свойства элемента сразу же принимают конечные значения, при этом анимация как бы отсутствует).
step-end – соответствует результату функции step(1,end) (стилевые свойства элемента находятся в исходном состоянии указанное время, а затем скачком принимают конечные значения, при этом анимация как бы отсутствует).

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-timing-function

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-timing-function

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		div{
		margin-top: 7em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 460px;
		height: 50px;
		border: solid 4px red;
		}
				
		/* Задаем общие свойства анимации */ 
		.anim{
		animation-name: example_1;
		animation-delay: 0s;
		animation-duration: 7s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: backwards;
		}
		
		/* Задаем плавность анимации */ 
		.anim_func_1{
		animation-timing-function: ease;
		}
		
		.anim_func_2{
		animation-timing-function: ease-in;
		}
				
		.anim_func_3{
		animation-timing-function: steps(5,start);
		}		

		/* Анимируем ширину элемента */				
		@keyframes example_1{
			from{
			width: 50px;
			}
			
			to{
			width: 500px;
			}
		}
	</style>
	
</head>
<body>

	<div class="anim anim_func_1">animation-timing-function: ease;</div>
	
	<div class="anim anim_func_2">animation-timing-function: ease-in;</div>

	<div class="anim anim_func_3">animation-timing-function: steps(5,start);</div>	
	
</body>	
</html>

Пример №1