Ivanq
@Ivanq
Знаю php, js, html, css

Добавить CSS-анимацию через JavaScript?

Привет, Тостер!
Пытаюсь разобраться с проблемой - как добавить через JavaScript CSS-анимацию в любом месте кода? Я могу вставить код CSS-анимации руками:
@keyframes anim {
    0% {
        background-color: yellow;
    }
    100% {
        background-color: green;
    }
}
#anim {
    animation: anim 2s ease;
}

И соответственно
document.getElementById("anim").style.animation = "anim 2s ease";

Как добавить animation: понятно, а вот @keyframes?

P.S. Желательно без jQuery, Mootools, etc.
  • Вопрос задан
  • 1204 просмотра
Решения вопроса 1
VIKINGVyksa
@VIKINGVyksa
front-end developer
Для этого используют классы css

Допустим у нас есть набор анимаций и классов с ними, в animation.css
@keyframes anim {
    0% {
        background-color: yellow;
    }
    100% {
        background-color: green;
    }
}
.main-animation {
    animation: anim 2s ease;
}


в js коде нам нужно добавить или удалить класс анимации у элимента который хотим анимировать

document.querySelector('.box').className="main-animation";
//если надо убрать анимацию то удаляем класс и всё


Данный способ является более практичным (не рекомендую делать по другому), так все делают. Используйте js для работы с DOM а анимацию предоставьте CSS Animations

Если вам нужно прям чисто js сделать,то надо создавать отдельную стилевую таблицу, как тут
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@EvgenZZ
php, javascript developer
лучше юзай Animate.css
Ответ написан
@orzubek
16лет, php, js, html/css. Самоучка.

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы