JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<div id="isisFighter" class="foo"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.foo {
    width: 100%;
    height: 100%;    
    position: fixed;
}

#isisFighter {
   background: red;
    /* name, duration, delay, itration-count, timing-function, direction */
   animation: a_isis_in 1s 0s 1 linear alternate;
}


@keyframes a_isis_in {
    0% {
        left: 100%;
    }
    100% {
        left: 0%;
    }
}

JavaScript

function showMessage() {
    alert('Transition has finished');
}

var el = document.getElementById("isisFighter");
// transitionend
// webkitTransitionEnd
el.addEventListener("transitionend", showMessage, false);