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

Question

[Ivanq]

Привет, Тостер!
Пытаюсь разобраться с проблемой - как добавить через 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.

Answer 1

[Andrey Dyrkov]

Для этого используют классы 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 сделать,то надо создавать отдельную стилевую таблицу, как тут

Comments

[Ivanq]

Да нет, дело не в этом. У меня параметры анимации могут быть разные. Нужно создать функцию, которой, к примеру, подают X и Y, а функция должна создать новый @keyframes для этих X и Y. То есть параметры @keyframes меняться могут

[Ivanq]

Что-то не могу понять. Может, покажете фидл?

[Andrey Dyrkov]

Ivanq: jsfiddle.net/codepo8/ATS2S/8/light

[Ivanq]

Andrey Dyrkov: Спасибо! Буду разбираться

Answer 2

[Евгений Петров]

лучше юзай Animate.css

Comments

[Ivanq]

мне нужно менять значения.

[Евгений Петров]

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

[Ivanq]

Евгений: не люблю библиотеки. хочу писать маленький код. получается - пишешь свою библиотеку, использую чужую

[Евгений Петров]

Пробуй гемор с css анимацией конкретный, все сам тоже пишу но с анимацией лучше стороннее

[Ivanq]

Евгений: мне тут подсказали - все очень просто стало
jsfiddle.net/Ivanq/ATS2S/432

[Евгений Петров]

Пробуй

[Ivanq]

Евгений: что пробуй?

[Евгений Петров]

Я про пример на fiddle, как в проекте будет работать...

[Ivanq]

Евгений: а... ясно )

Answer 3

[Орзубек Рахимов]