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

правити

Порада

Застосовуйте reverse, щоб анімація виконувалася у зворотному напрямку. Це корисно для створення анімацій, які мають різний початковий і кінцевий стан, і вам потрібно, щоб анімація починалася з кінця і рухалася назад до початку. Наприклад, для анімації зворотного руху:

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

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

Порада

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

const element = document.getElementById("myElement");
element.style.animation = "spin 4s infinite";
element.addEventListener("click", () => {
    element.style.animationDirection = element.style.animationDirection === "normal" ? "reverse" : "normal";
});

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

Порада

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

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

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

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

Синтаксис

element.style.animationDirection

Переглядачі

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

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

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

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

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

Приклади

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

<div id="myElement">Демонстраційний елемент</div>

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;
    }
}
*/

<div id="myElement">Демонстраційний елемент</div>

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);
    }
}
*/