JS властивість CSSStyleDeclaration.animationFillMode
Загальний опис
animationFillMode - це властивість JavaScript, що дозволяє встановити або отримати значення CSS-властивості animation-fill-mode для вказаного елемента. Вона визначає, як застосовується стиль анімації CSS до елемента за межами проміжку часу, заданого властивістю animation-duration або animation-iteration-count.
Ця властивість може приймати рядкові значення: none, forwards, backwards або both. Значення none вказує, що стилі анімації не застосовуються до елемента за межами тривалості анімації. forwards зберігає стиль останнього кадру анімації після її завершення. backwards застосовує стиль першого кадру анімації до елемента перед початком анімації. both поєднує ефекти forwards та backwards.
Ось приклад використання animationFillMode в JavaScript:
const element = document.querySelector('.element');
// Встановлення значення властивості
element.style.animationFillMode = 'forwards';
// Отримання значення властивості
const fillMode = element.style.animationFillMode;
Зверніть увагу, що animationFillMode впливає лише на інлайновий стиль елемента. Для встановлення цієї властивості через CSS-правила необхідно використовувати відповідну CSS-властивість animation-fill-mode.
Властивість animationFillMode корисна для контролю стану анімованого елемента до початку та після завершення анімації, що дозволяє створювати плавні переходи та циклічні анімації. Однак вона не впливає на анімацію під час її перебігу в проміжку часу, заданому властивістю animation-duration.
| Порада: | Значення |
| Порада: | Встановіть |
| Порада: | Якщо потрібно, щоб елемент залишався у стані, визначеному останнім ключовим кадром анімації після її завершення, встановіть |
Синтаксис
element.style.animationFillModeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі користувач може вибрати режим animation-fill-mode через випадаюче меню та побачити, як це впливає на поведінку анімації. Наприклад, при виборі forwards елемент залишиться у кінцевому стані анімації, а при виборі backwards — застосуються початкові стилі анімації до її фактичного початку. Це надає можливість краще зрозуміти, як animation-fill-mode впливає на елемент до і після анімації.
У цьому прикладі ми використовуємо animationFillMode для збереження стану анімованого елемента після завершення анімації. Це корисно, коли потрібно, щоб елемент залишався в кінцевому стані анімації, а не повертався до початкового стану.
<script>
const element = document.querySelector('.element');
// Встановлення значення властивості
element.style.animationFillMode = 'forwards';
// Додавання класу з анімацією
element.classList.add('animate');
</script>
<style>
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.animate {
animation: slide 1s;
}
</style>У цьому прикладі ми створюємо циклічну анімацію з використанням element.style.animationFillMode = 'both'. Це дозволяє плавно переходити від кінцевого стану однієї ітерації анімації до початкового стану наступної ітерації.
<script>
const element = document.querySelector('.element');
// Встановлення значення властивості
element.style.animationFillMode = 'both';
element.style.animationIterationCount = 'infinite';
// Додавання класу з анімацією
element.classList.add('animate');
</script>
<style>
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.animate {
animation: pulse 1s infinite;
}
</style>