CSS-свойство transition-timing-function
указывает, как рассчитываются промежуточные значения CSS-свойств, на которые влияет эффект перехода transition
.
Значение по умолчанию: | ease |
Применяется к: | Все элементы, ::before и ::after псевдо-элементы |
Наследование: | Нет |
Анимирование: | Нет. Анимируемые свойства |
Версия: | Новый в CSS3 |
Синтаксис
Синтаксически свойства задаются по следующему шаблону:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inherit
Примеры написания кода свойства transition-timing-function
:
button {
background: #fd7c2a;
/* For Safari 3.0+ */
-webkit-transition-property: background;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
/* Standard syntax */
transition-property: background;
transition-duration: 2s;
transition-timing-function: linear;
}
button:hover {
background: #3cc16e;
}
Значения свойств
В следующей таблице описаны значения этого свойства.
Значение | Описание |
---|---|
linear |
Указывает, что переход из начального состояния в конечное состояние происходит с линейной (постоянной) скоростью. |
ease |
Аналогично ease-in-out , но в начале ускорение более резкое, а уже в середине оно начинает замедляться. |
ease-in |
Указывает, что переход начинается медленно, затем постепенно ускоряется, пока не будет достигнуто конечное состояние и переход не остановится внезапно. |
ease-out |
Указывает, что переход начинается быстро, а затем постепенно замедляется при приближении к его конечному состоянию. |
ease-in-out |
Указывает, что переход начинается медленно, ускоряется, а затем замедляется при приближении к своему конечному состоянию. |
cubic-bezier(n,n,n,n) |
Определяет кубическую кривую Безье. Это также известно как кривая скорости. Указываются 4 значения — числовые значения от 0 до 1. |
initial |
Устанавливает это свойство в значение по умолчанию. |
inherit |
Если указан, связанный элемент принимает вычисленное значение своего родительского элемента transition-timing-function . |
Поддержка браузеров
Свойство transition-timing-function
поддерживается во всех основных браузерах.