Закрыть   X

  •    
  •    
Печать

transition-timing-function

Автор: Алексей Елизаров.

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

Поддержка браузеров

Firefox 4 поддерживает альтернативное свойство -moz-transition.
Safari и Chrome поддерживают альтернативное свойство -webkit-transition.
Opera поддерживает альтернативное свойство -o-transition.

Описание

Свойство transition-timing-function задает кривую скорости для эффекта трансформации.

В этом свойстве используется математическая функция, называемая кубической кривой Безье, чтобы сделать кривую скорости. Вы можете использовать ваши собственные значения в этой функции, или использовать одно из предопределенных значений.

Значение по умолчанию: ease
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transitionTimingFunction="linear"

Значения свойства

Значение Описание
linear Эффект трансформации проходит с одинаковой скоростью от начала до конца.
(эквивалент cubic-bezier(0,0,1,1)).
ease Скорость трансформации увеличивается к середине и снижается к окончанию.
(эквивалент cubic-bezier(0.25,0.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))
cubic-bezier(n,n,n,n) Определение собственных значений скорости. Возможные числовые значения 0 и 1.

div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari и Chrome */
-o-transition:width 2s; /* Opera */
}

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
/* Safari и Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}

div:hover
{
width:500px;
}


 


© 2018 cssprofi.ru.Алексей Елизаров. Все права защищены
cssprofi.ru - запрещено использование материалов сайта без согласия его автора и обратной ссылки