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

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

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

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

Синтаксис

transition-timing-function: ease || ease-in || ease-out || ease-in-out || linear || step-start || step-end || steps || cubic-bezier

Значения

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://drafts.csswg.org/css-transitions-1/#propdef-transition-timing-function

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

Примеры

HTML Результат

htmlCodes

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

	<style>
		div{
		margin-top: 2em;
		overflow: hidden;
		white-space: nowrap;
		padding: 1em;
		width: 200px;
		height: 50px;
		border: solid 4px red;
		cursor: pointer;
		}
				
		/* Задаем общие параметры перехода */
		.tran{
		transition-property: width, background-color;
		transition-delay: 0.3s;
		transition-timing-function: ease;
		transition-duration: 2s;
		}
		
		/* Задаем плавность перехода */ 
		.tran_timing-function_1{
		transition-timing-function: ease;
		}
		
		.tran_timing-function_2{
		transition-timing-function: ease-in;
		}
				
		.tran_timing-function_3{
		transition-timing-function: steps(5,start);
		}
		
		/* Будут изменяться два свойства */
		div.tran:hover{
		background-color: #0000ff;
		width: 400px;
		}
		
	</style>
	
</head>
<body>

	<div>Наведите курсор на блоки!</div>
	
	<div class="tran tran_timing-function_1">
		transition-timing-function: ease;
	</div>

	<div class="tran tran_timing-function_2">
		transition-timing-function: ease-in;
	</div>	

	<div class="tran tran_timing-function_3">
		transition-timing-function: steps(5,start);
	</div>
	
</body>	
</html>

Пример №1