JSFiddle - React, Tailwind, and code Playground

by gergana

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div> 
</div>

CSS

@-webkit-keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}
@-moz-keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
      animation-timing-function: ease-out;
    }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}
@keyframes bounce {
    0% {
      top: 0;
      animation-timing-function: ease-out;
    }
    17% {
      top: 15px;
      animation-timing-function: ease-in;
    }
    34% {
      top: 0;
      animation-timing-function: ease-out;
    }
    51% {
      top: 8px;
      animation-timing-function: ease-in;
    }
    68% {
      top: 0px;
       }
    85% {
      top: 3px;
      animation-timing-function: ease-in;
    }
    100% {
      top: 0;
    }
}
#container { position:relative; }
.box { 
    position: relative;
    float:left;
    background:#f00; 
    width:50px;
    height:50px;
    margin-right:5px;
}
.box.animated { 
    -moz-animation: bounce 1s;
    -webkit-animation: bounce 1s;
    animation: bounce 1s;
}

JavaScript

const elements = document.getElementsByClassName('box');

for (let i = 0; i <= elements.length; i++) {
	elements[i].addEventListener('animationend', function(e) {
  	console.log(e)
    elements[i].classList.remove('animated');
	});

  elements[i].addEventListener('mouseover', function(e) {
  	console.log(e)
    elements[i].classList.add('animated')
  })
}