Свойство CSS animation-timing-function
Пример
Воспроизведение анимации с одинаковой скоростью от начала до конца:
div {
animation-timing-function: linear;
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Определяет animation-timing-functionкривую скорости анимации.
Кривая скорости определяет ВРЕМЯ, которое анимация использует для перехода от одного набора стилей CSS к другому.
Кривая скорости используется для плавного внесения изменений.
| Значение по умолчанию: | простота |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Читать об анимации |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.animationTimingFunction="линейный" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.
| Property | |||||
|---|---|---|---|---|---|
| animation-timing-function | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Синтаксис CSS
animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
Функция синхронизации анимации использует математическую функцию, называемую кубической кривой Безье, для построения кривой скорости. Вы можете использовать свои собственные значения в этой функции или использовать одно из предопределенных значений:
Значения свойств
| Value | Description | Play it |
|---|---|---|
| linear | The animation has the same speed from start to end | |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
| ease-in | The animation has a slow start | |
| ease-out | The animation has a slow end | |
| ease-in-out | The animation has both a slow start and a slow end | |
| step-start | Equivalent to steps(1, start) | |
| step-end | Equivalent to steps(1, end) | |
| steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "end" | |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Совет: попробуйте разные значения в разделе «Дополнительные примеры» ниже.
Дополнительные примеры
Пример
Чтобы лучше понять различные значения функции синхронизации;
Вот пять разных элементов <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;}
Пример
То же, что и в приведенном выше примере, но кривые скорости определяются кубической функцией Безье:
#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);}
Связанные страницы
Учебное пособие по CSS: CSS-анимации
Справочник по HTML DOM: свойство animationTimingFunction