JSFiddle - React, Tailwind, and code Playground

by spacebeers

HTML

<a id="animationTest">Hover over me</a>

CSS

#animationTest {
            width: 150px;
            text-align: center;
            display: block;
            padding: 20px;
            background: #000;
            color: #fff;
            border-bottom: 10px solid red;
            cursor: pointer;
                    transition: border-bottom 0.5s linear; /* vendorless fallback */
                   -o-transition: border-bottom 0.5s linear; /* opera */
                -ms-transition: border-bottom 0.5s linear; /* IE 10 */
               -moz-transition: border-bottom 0.5s linear; /* Firefox */
            -webkit-transition: border-bottom 0.5s linear; /*safari and chrome */
        }

        #animationTest:hover {
            border-bottom: 10px solid blue;
        }

JavaScript

var animationTest = document.getElementById('animationTest');

animationTest.addEventListener('webkitAnimationEnd', function(){
    alert("Finished animation (listener)!");
    console.log("Finished animation (listener)!");
});

$('#animationTest').bind("webkitAnimationEnd", function(){
    alert("Finished animation (bind)!");
    console.log("Finished animation (bind)!");
});