УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS
animation
appearance
backface-visibility
background
border
bottom
box
caption-side
clear
clip
color
column
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
float
font
grid-columns
grid-rows
hanging-punctuation
height
icon
@keyframes
left
letter-spacing
line-height
list-style
margin
max-height
max-width
min-height
min-width
nav
opacity
outline
overflow
overflow-x
overflow-y
padding
page-break
perspective
perspective-origin
position
punctuation-trim
quotes
resize
right
rotation
rotation-point
table-layout
target
text
top
transform
transition
vertical-align
visibility
width
white-space
word-spacing
word-break
word-wrap
z-index

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