JSFiddle - React, Tailwind, and code Playground

HTML

<div>1</div>

<div>2</div>

<div>3</div>

CSS

/* This is the animation code. */
@keyframes example {
   0% { transform: scale(1.0); }
   /* 33%   { transform: scale(1.5, 0.7);} */
   /* 66% { transform: scale(1.0); } */
   100%   { transform: scale(1.5, 0.7);}
}

/* This is the element that we apply the animation to. */
div {
    width: 50px;
    height: 50px;
    margin: 50px; 50px;
    background-color: #88F;
    line-height: 50px;
    text-align: center;
}

/* This is the element that we apply the animation to. */
div:hover {
   animation-name: example;
   animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.900, 0.00, 0.100, 1.00); /* ease is the default */
   /* animation-timing-function: linear; */
   animation-delay: 0s;             /* 0 is the default */
   animation-iteration-count: 2;    /* 1 is the default */
   animation-direction: alternate;  /* normal is the default */
}