CSS animation-timing-function — плавність анімації
Властивість animation-timing-function визначає криву швидкості анімації кожного циклу між ключовими кадрами. В якості значень для властивості використовуються часові функції додані в CSS3.
Вона являє собою математичну функцію, яка показує, як швидко з часом змінюється значення властивості. Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, при цьому функція по осі ординат може перевищувати ці значення в більшу чи меншу сторону.
На відмінну від @keyframe ця властивість впливає лише на демонстрацію циклів між ключовими кадрами, а не на анімацію цілком!
Наприклад, використовуючи часову функцію ease-in-out анімація буде повільно починатися, пришвидшуватися та повільно закінчуватися. І так кожен цикл демонстрації. Якщо animation-timing-function задана тільки для блоку @keyframe, то й впливає вона лише на цей ключовий кадр. В протилежному випадку властивість визначає криву швидкості всіх кадрів анімації.
На цьому прикладі ми бачимо два елементи. Для одного задана крива швидкості Безьє, для другого - залишено значення без задання linear, тобто однакову швидкість протягом кожного циклу:
Загальний опис
автор: NagarD
- Нотатка
-
Рекомендується використовувати універсальну властивість
автор: Svitlanaanimation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.
Синтаксис
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 може отримувати 11 значень:
-
linear -
Однакова швидкість від початку і до кінця
автор: Svitlana -
ease -
Анімація починається повільно, потім прискорюється і до кінця руху знову сповільнюється. Аналогічно
автор: Svitlanacubic-bezier (0.25,0.1,0.25,1) -
ease-in -
Анімація повільно починається, до кінця прискорюється. Аналогічно
автор: Svitlanacubic-bezier (0.42,0,1,1) -
ease-out -
Анімація починається швидко, до кінця сповільнюється. Аналогічно
автор: Svitlanacubic-bezier (0,0,0.58,1) -
ease-in-out -
Анімація починається і закінчується повільно. Аналогічно
автор: Svitlanacubic-bezier (0.42,0,0.58,1) -
step-end -
Як такої анімації немає. Стильові властивості відразу ж приймають кінцеве значення
автор: Svitlana -
step-start -
Як такої анімації немає. Стильові властивості знаходяться в початковому значенні заданий час, потім відразу ж приймають кінцеве значення
автор: Svitlana -
steps(int,start|end) -
Ступінчаста функція, що має задане число кроків.
animation-timing-function: steps(<число>, start | end)- <число> - ціле число більше нуля;
- start - задає напівбезперервна знизу функцію;
- end - задає напівбезперервна зверху функцію
-
cubic-bezier(n,n,n,n) -
Задає функцію руху у вигляді кривої Безьє
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: Svitlana
| Значення без задання: | ease |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationTimingFunction="linear" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 43 | 16 | 9 | 30 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 43 | 43 | 16 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Інструмент
Малює криву плавності й програє її на анімації.
Редактор cubic-bezier — окремою сторінкою, з поясненням пасток.
Обидва блоки їдуть ті самі 3 секунди, але верхній із linear — рівномірно, а нижній із ease — з розгоном на старті й гальмуванням у кінці.
HTML
<div class="box linear">linear</div>
<div class="box ease">ease</div>CSS
.box {
width: 200px;
padding: 8px;
margin-bottom: 8px;
color: #fff;
position: relative;
animation: mymove 3s infinite;
}
.linear {
animation-timing-function: linear;
background: #0172ad;
}
.ease {
animation-timing-function: ease;
background: #d81b60;
}
@keyframes mymove {
from { left: 0; }
to { left: 160px; }
}Демонстрації різних значень властивості
HTML
<p>Різні значення для <code>animation-timing-function</code> у дії:</p>
<button id="btn">Запустити анімацію</button>
<hr>
<div class="wrapper">
<div class="block block-1">
<span>linear</span>
</div>
<div class="block block-2">
<span>ease</span>
</div>
<div class="block block-3">
<span>ease-in</span>
</div>
<div class="block block-4">
<span>ease-out</span>
</div>
<div class="block block-5">
<span>ease-in-out</span>
</div>
</div>
<div class="wrapper">
<div class="block block-6">
<span>step-end</span>
</div>
<div class="block block-7">
<span>step-start</span>
</div>
<div class="block block-8">
<span>steps(5, end)</span>
</div>
<div class="block block-9">
<span>cubic-bezier(0.25, 0.1, 0.25, 3.0)</span>
</div>
</div>CSS
body {
padding: 36px;
text-align: center;
font-family: monospace;
font-size: 17px;
color: #222;
line-height: 1.45;
}
#btn {
cursor: pointer;
width: 250px;
text-align: center;
padding: 6px 12px;
font-size: 19px;
display: inline-block;
}
@keyframes animate {
from {
margin-top: 50px;
}
to {
margin-top: 100px;
}
}
.wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 350px;
background-color: #eee;
margin-bottom: 16px;
}
.block {
background-color: red;
padding: 26px 8px;
width: 125px;
margin: 2px;
text-align: center;
color: #fff;
font-size: 15px;
border: 2px solid rgba(255, 255, 255, .45);
animation-name: animate;
animation-duration: 1.25s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-direction: alternate;
animation-play-state: paused;
animation-iteration-count: infinite;
}
.block-1 {
animation-timing-function: ease-in;
}
.block-2 {
animation-timing-function: linear;
}
.block-3 {
animation-timing-function: ease-in;
}
.block-4 {
animation-timing-function: ease-out;
}
.block-5 {
animation-timing-function: ease-in-out;
}
.block-6 {
animation-timing-function: step-end;
}
.block-7 {
animation-timing-function: step-start;
}
.block-8 {
animation-timing-function: steps(5, end);
}
.block-9 {
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);
}JS
var blocks = document.getElementsByClassName('block');
var btn = document.getElementById('btn');
btn.onclick = function () {
for (var i = 0; i < blocks.length; i++) {if (window.CP.shouldStopExecution(0)) break;
blocks[i].style.animationPlayState = blocks[i].style.animationPlayState == 'paused' ? 'running' : 'paused';
btn.innerHTML = blocks[i].style.animationPlayState == 'paused' ? 'Запустити анімацію' : 'Зупинити анімацію';
}window.CP.exitedLoop(0);
};
//# sourceURL=pen.jsПростий приклад дії анімації
HTML
<div class="wrapper">
<div class="block block-1">
<span>cubic-bezier(0.25, 0.1, 0.25, 3.0)</span>
</div>
<div class="block block-2">
<span>linear</span>
</div>
</div>CSS
body {
padding: 36px;
text-align: center;
font-family: monospace;
font-size: 17px;
color: #222;
line-height: 1.45;
}
#btn {
cursor: pointer;
width: 250px;
text-align: center;
padding: 6px 12px;
font-size: 19px;
display: inline-block;
}
@keyframes animate {
from {
margin-top: 0;
}
to {
margin-top: 100px;
}
}
.wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.block {
background-color: red;
padding: 26px 8px;
width: 175px;
text-align: center;
color: #fff;
font-size: 15px;
border: 2px solid rgba(255, 255, 255, .45);
animation-name: animate;
animation-duration: 1.25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0s;
animation-direction: alternate;
}
.block-1 {
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 3.0);
}Коментарі
Коментарів ще немає — будьте першим!