Animation 0s

by stopsatgreen

HTML

<h1>OK</h1>

CSS

@keyframes ok {
    from { background-color: red; }
    50% { background-color: black; }
    to { background-color: yellow; }
}
h1 { animation: ok 0s 1s both; }

JavaScript

var ok = document.querySelector('h1');
ok.addEventListener('animationstart', function(e) {
    console.log('start', e.animationName);
});
ok.addEventListener('animationend', function(e) {
    console.log('end', e.animationName);
});
ok.addEventListener('animationiteration', function(e) {
    console.log('iteration', e.animationName);
});