|
|
CSS3 Свойство transition-timing-function
 Полный 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 */ |
Попробуйте сами » |
Поддержка Браузерами
Свойство 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 Справочник
|
|
