УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS3 Свойство transition-timing-function


CSS Справочник Полный CSS Справочник

Пример

Эффект перехода с одинаковой скоростью от начала до конца:

transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari и Chrome */
-o-transition-timing-function: linear; /* Opera */

Попробуйте сами »

Поддержка Браузерами

Internet Explorer Firefox Opera Google Chrome Safari

Свойство transition-timing-function не поддерживается ни одним браузером.

Firefox 4 поддерживает альтернативное свойство -moz-transition-timing-function.

Safari и Chrome поддерживают альтернативное свойство -webkit-transition-timing-function.

Opera поддерживает альтернативное свойство -o-transition-timing-function.


Определение и Использование

Свойство transition-timing-function указывает скоростную характеристическую функцию эффекта перехода.

Это свойство позволяет эффекту перехода изменять скорость во время исполнения.

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


Синтаксис

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

Значение Описание
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 с пятью различными значениями:

#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;}

Попробуйте сами »

Пример

То же, что и в примере выше, но характеристические кривые скорости указаны с помощью кубической функции Безье:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox 4: */
#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari и Chrome: */
#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Opera: */
#div1 {-o-transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Попробуйте сами »


CSS Справочник Полный CSS Справочник




© 2011 - 2022 Уроки CSS