Animation events

by stopsatgreen

HTML

<h1>CSS</h1>

CSS

@-webkit-keyframes foo {
    to { padding: 1em; }
}
@keyframes foo {
    to { padding: 1em; }
}
h1 {
    font-size: 200%;
    /* -webkit-animation: foo 4s;
    animation: foo 1s backwards; */
}
h1::after, h1::before {
    -webkit-transition: 2s;
    transition: 2s;
}
h1::after {
    content: ' 4';
}
h1::before {
    content: '3 ';
}
h1:hover {
    -webkit-animation: foo 4s;
    animation: foo 0s forwards;
}
h1:hover::after, h1:hover::before {
    color: yellow;
}

JavaScript

var h1 = document.querySelector('h1');
h1.addEventListener('animationstart', function(e) {
    console.log(e);
});
h1.addEventListener('animationend', function(e) {
    console.log(e);
});
var h1 = document.querySelector('h1');
h1.addEventListener('webkitAnimationStart', function(e) {
    console.log(e);
});
h1.addEventListener('webkitAnimationEnd', function(e) {
    console.log(e);
});