JSFiddle - React, Tailwind, and code Playground

by lemon kazi

HTML

<div id='box'>
    hover me
</div>

CSS

#box{
 position:absolute;
 top:200px;
 left:200px;
 width:200px;
 height:150px;
 background-color:red;
 -webkit-animation-fill-mode: forwards;
}

#box:hover{
  -webkit-animation:scaleme 1s;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes scaleme {
  0% { -webkit-transform: scale(1); opacity: 1; }
  100% { -webkit-transform: scale(3); opacity: 0; display:none; -webkit-animation-play-state: paused;}
}

JavaScript

var myBox = document.getElementById('box');
myBox.addEventListener('webkitAnimationEnd',function( event ) { myBox.style.display = 'none'; }, false);