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

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


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

Пример

Воспроизведение анимации с одной и той же скоростью от начала до конца:

animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari и Chrome */

Попробуйте сами »
Еще примеры внизу этой страницы.

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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


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

Свойство animation-timing-function указывает характеристическую кривую (функцию) скорости анимации.

Функция скорости определяет определяет ВРЕМЯ, которое использует анимация для изменения от одного множества CSS стилей к другому.

Кривая скорости используется для равномерного, плавного воспроизведения анимации.

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


Синтаксис

animation-timing-function: значение;

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

Значение Описание
linear Анимация имеет одинаковую скорость от начала до конца
ease Значение по умолчанию. Анимация начинается медленно, затем ускоряется, перед завершением опять замедляется
ease-in Анимация имеет замедленное начало
ease-out Анимация имеет замедленное завершение
ease-in-out Анимация имеет замедленное начало и замедленное завершение
cubic-bezier(n,n,n,n) Определение ваших собственных значений в кубической функции Безье
Допустимыми значениями являются числовые значения то 0 до 1

Совет: Поэкспериментируйте с различными значениями в разделе "Попробуйте Сами" ниже.


Примеры

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


Пример

Чтобы лучше понять различные значения временной функции скорости;
Здесь пять различных элементов <div> с пятью различными значениями:

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

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

Пример

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

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

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


Смотрите Также

CSS3 Уроки: CSS3 Анимация


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




© 2011 - 2022 Уроки CSS