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 = forwards.

автор: Bond правити

Порада

Значення backwards дозволяє візуалізувати початковий стан анімації до її запуску, що може бути корисним для налаштування та дебагу.

автор: Bond правити

Порада

Встановіть element.style.animationFillMode = 'both', щоб застосувати стилі першого ключового кадру до початку анімації, а стилі останнього – після її завершення, забезпечуючи плавний перехід між станами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.animationFillMode

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="element">Блок</div>

.element {
    width: 140px;
    padding: 10px;
    background: #0172ad;
    color: #fff;
}

@keyframes slide {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.animate {
    animation: slide 1s;
}

const element = document.querySelector('.element');

// forwards: після завершення елемент лишається в кінцевому кадрі
element.style.animationFillMode = 'forwards';

element.classList.add('animate');

<div class="element">Блок</div>

.element {
    width: 140px;
    padding: 10px;
    background: #d81b60;
    color: #fff;
}

@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.animate {
    animation: pulse 1s infinite;
}

const element = document.querySelector('.element');

element.style.animationFillMode = 'both';
element.style.animationIterationCount = 'infinite';

element.classList.add('animate');