animation-timing-function | Справочник CSS
http://belarusweb.net
Основы создания сайтов

animation-timing-function

Описание

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

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

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

Синтаксис

animation-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) (стилевые свойства элемента находятся в исходном состоянии указанное время, а затем скачком принимают конечные значения, при этом анимация как бы отсутствует).

Ссылки

Примеры

HTML Результат BwCodes
<!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