Динамическое создание CSS анимации ключевых кадров с помощью JavaScript

Question

Я знаю, что это грязный способ попытаться осуществить это, но, возможно, это можно сделать ... Какой синтаксис подходит для динамического назначения ключевого кадра CSS через JavaScript?

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@-moz-keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

...

cue.style.mozAnimationName = 'pop 2s'; //not sure how to trigger this...

Заметьте, в этой демонстрации я нацеливаюсь только на Firefox, также для простоты пропущено содержимое div "cue"

Answer 1

Во-первых, избавьтесь от этих moz префиксов везде, Firefox поддерживает нефиксированную анимацию с незапамятных времен, как и все браузеры. (кроме того, это style.MozXXX)

Тогда style.animationName должно быть именем анимации (да), и ваша анимация называется "pop", а не "pop 2s ".

2s будет допустимым значением для style.animationDuration:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

cue.style.animationName = 'pop';
cue.style.animationDuration = '2s';

<div id="appContainer"></div>

pop 2s больше похоже на стенографию animation свойство:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.setAttribute(
    'style',
    'opacity:' + '0;'
);
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode('@keyframes pop {'+
    '0% { opacity:0; }'+
    '50% { opacity:1; }'+
    '100% { opacity:0; }'+
    '}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);

appContainer.appendChild(cue);

cue.style.animation = 'pop 2s';

<div id="appContainer"></div>

Но я не могу не заметить, что если вы собираетесь писать динамические c таблицы стилей, то очень мало смысла устанавливать элементы вашего элемента. встроенные стили; лучше также установить эти стили внутри таблицы стилей:

var cue = document.createElement('div');
cue.setAttribute('id', 'cue');
cue.textContent = "hello";

var cueAnimation = document.createElement('style');
cueAnimation.type = 'text/css';
var rules = document.createTextNode( '' +
'#cue {' +
'  opacity: 0;'+
'  animation: pop 2s infinite;'+
'}' +
'@keyframes pop {'+
'  0% { opacity:0; }'+
'  50% { opacity:1; }'+
'  100% { opacity:0; }'+
'}');
cueAnimation.appendChild(rules);
cue.appendChild(cueAnimation);
appContainer.appendChild(cue);

<div id="appContainer"></div>