JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    HOVER BELOW
    <div id="animation"></div>
</div>

CSS

#wrapper{
    opacity: 1;
    border: 1px solid;
    height: 200px;
    width: 200px;
}
#animation{
    opacity: 0;
    height: 75%;
    width: 75%;
    background-size: cover;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/3/33/Nicolas_Cage_2011_CC.jpg);
}
.animations {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

JavaScript

var el = document.getElementById("animation");

el.onmouseenter = function (){
    this.classList.add("animations");
};

el.onmouseleave = function (){
    this.classList.remove("animations");
};