JS властивість CSSStyleDeclaration.animationDirection

Загальний опис

animationDirection – це властивість JavaScript, яка визначає напрямок виконання анімації CSS для HTML-елемента. Основна суть цієї властивості полягає в тому, що вона дозволяє встановити або повернути напрямок, у якому буде відбуватися анімація. Це дуже корисно для створення складніших та більш динамічних анімацій, оскільки ви можете змінювати напрямок анімації, наприклад, для досягнення ефекту "гойдання" або для відтворення анімації у зворотному порядку.

Властивість animationDirection може приймати чотири різні значення:

• normal (анімація виконується у напрямку вперед, тобто від початку до кінця).
• reverse (анімація виконується у зворотному напрямку, тобто від кінця до початку).
• alternate (анімація чергує напрямок з кожним циклом, тобто вперед, назад, вперед і так далі).
• alternate-reverse (анімація чергує напрямок з кожним циклом, починаючи з зворотного напрямку).

Розглянемо основні приклади використання цієї властивості.

Найпростіший приклад використання animationDirection з напрямком normal виглядає так:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 3s infinite";
element.style.animationDirection = "normal";

У цьому випадку анімація slideIn виконується у напрямку вперед, повторюючись нескінченно.

Щоб змінити напрямок анімації на зворотний, використовуйте значення reverse:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 3s infinite";
element.style.animationDirection = "reverse";

Тепер анімація slideIn буде виконуватись у зворотному напрямку, тобто від кінця до початку.

Для створення чергуючої анімації використовуйте значення alternate:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 3s infinite";
element.style.animationDirection = "alternate";

У цьому прикладі анімація slideIn буде виконуватись вперед у першому циклі, потім назад у другому циклі і так далі, чергуючи напрямок з кожним новим циклом.

Якщо вам потрібно, щоб анімація починалася зі зворотного напрямку, а потім чергувалася, використовуйте значення alternate-reverse:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 3s infinite";
element.style.animationDirection = "alternate-reverse";

Тепер анімація slideIn буде виконуватись назад у першому циклі, потім вперед у другому циклі і так далі.

Окрім встановлення значень властивості, ви також можете динамічно змінювати напрямок анімації під час виконання, наприклад, у відповідь на взаємодію користувача:

const element = document.getElementById("myElement");
element.style.animation = "slideIn 3s infinite";
element.style.animationDirection = "normal";

element.addEventListener("click", () => {
    element.style.animationDirection = element.style.animationDirection === "normal" ? "reverse" : "normal";
});

У цьому прикладі анімація змінюватиме свій напрямок між normal та reverse при кожному кліку на елемент.

Властивість animationDirection відкриває великі можливості для створення складних анімаційних ефектів, що можуть значно покращити користувацький досвід на веб-сторінках. Використовуючи різні значення цієї властивості, ви можете контролювати напрямок виконання анімацій, створюючи більш динамічні та привабливі інтерфейси.

Синтаксис

element.style.animationDirection

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

const element = document.getElementById("myElement");
element.style.animation = "move 4s infinite"; // задаємо анімацію на 4 секунди з нескінченним повторенням
element.style.animationDirection = "alternate"; // встановлюємо чергування напрямку

// CSS для анімації
/*
#myElement {
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
}

@keyframes move {
    from {
        left: 0;
    }
    to {
        left: 200px;
    }
}
*/

const element = document.getElementById("myElement");
element.style.animation = "spin 5s infinite"; // задаємо анімацію на 5 секунд з нескінченним повторенням
element.style.animationDirection = "normal"; // встановлюємо початковий напрямок анімації

// Додаємо обробник подій для зміни напрямку анімації при кліку
element.addEventListener("click", () => {
    // Змінюємо напрямок анімації на протилежний
    element.style.animationDirection = element.style.animationDirection === "normal" ? "reverse" : "normal";
});

// CSS для анімації
/*
#myElement {
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 50%;
    position: relative;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
*/