Свойство CSS animation-timing-function
Свойство animation-timing-function определяет, как анимация будет прогрессировать в течение каждого цикла, а не на протяжении всей анимации. Оно задаёт кривую скорости анимации, определяющую время, необходимое для перехода от одного набора стилей к другому.
Функции тайминга определяют интерполяцию между ключевыми кадрами. Если для интервала не указана функция тайминга, используется значение animation-timing-function элемента.
Свойство animation-timing-function является одним из свойств CSS3.
Оно может принимать следующие значения:
ease- (по умолчанию) Начинается медленно, затем ускоряется и заканчивается медленно.ease-in- Начинается медленно, но ускоряется в конце.ease-out- Начинается быстро, но замедляется в конце.ease-in-out- Начинается медленно и заканчивается медленно.step-start- Эквивалентноsteps(1, start).step-end- Эквивалентноsteps(1, end).linear- Анимация имеет одинаковую скорость на протяжении всего времени, чаще всего лучше подходит для изменения цвета или прозрачности.steps(int, start|end)- Задает функцию шага с двумя параметрами. Первый параметр определяет количество интервалов в функции. Он должен быть больше 0. Второй параметр — это значение "start" или "end", которое указывает точку, в которой происходит изменение значений в пределах интервала. Если второй параметр опущен, используется "end".cubic-bezier(n,n,n,n)- Задает пользовательские значения для функции cubic-bezier. Первые два параметра определяют координаты X и должны быть в диапазоне от 0 до 1. Последние два параметра определяют координаты Y и могут быть любым числом.
При указании нескольких значений, разделенных запятыми, они сопоставляются с соответствующими анимациями, определенными в animation-name по порядку. Если функций тайминга меньше, чем анимаций, список повторяется для соответствия количеству.
| Начальное значение | ease |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к псевдоэлементам ::before и ::after. |
| Наследуется | Нет |
| Анимируемое | Нет |
| Версия | CSS3 |
| Синтаксис DOM | object.style.animationTimingFunction = "linear"; |
Синтаксис
Синтаксис свойства CSS animation-timing-function
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;Пример свойства animation-timing-function со значением "ease":
Пример свойства CSS animation-timing-function со значением ease
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
animation: element 5s infinite;
animation-timing-function: ease;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Пример свойства animation-timing-function со значением "ease-in":
Пример свойства CSS animation-timing-function со значением ease-in
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #8ebf42;
position: relative;
animation: element 7s infinite;
animation-timing-function: ease-in;
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-timing-function Property</h1>
<div></div>
</body>
</html>Пример свойства animation-timing-function с различными функциями тайминга:
Пример свойства CSS animation-timing-function со значениями linear, ease, ease-in, ease-out и ease-in-out
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
color: #eee;
font-weight: bold;
position: relative;
text-align: center;
padding: 8px;
animation: mymove 5s infinite;
}
#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;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html>Значения
| Значение | Описание | Воспроизвести |
|---|---|---|
| ease | Анимация начинается медленно, затем ускоряется и заканчивается медленно. Это значение по умолчанию. | Воспроизвести » |
| linear | Протекает с постоянной скоростью на протяжении всей анимации. | Воспроизвести » |
| ease-in | Анимация начинается медленно, но ускоряется в конце. | Воспроизвести » |
| ease-out | Анимация начинается быстро, но замедляется в конце. | Воспроизвести » |
| ease-in-out | Анимация начинается медленно и заканчивается медленно. | Воспроизвести » |
| step-start | Эквивалентно steps(1, start). | |
| step-end | Эквивалентно steps(1, end). | |
| steps(int,start|end) | Задает функцию шага с двумя параметрами. Первый параметр указывает количество интервалов в функции. Он должен быть больше 0. Второй параметр — это значение "start" или "end", которое указывает точку, в которой происходит изменение значений в пределах интервала. Если второй параметр не указан, используется значение "end". | |
| cubic-bezier (n,n,n,n) | Определяет значения с помощью функции cubic-bezier. Первые два параметра — это координаты X (от 0 до 1), а последние два — координаты Y (любое число). | |
| initial | Заставляет свойство использовать значение по умолчанию. | |
| inherit | Наследует свойство от родительского элемента. |
Практика
Что указывает свойство CSS animation-timing-function?