JSFiddle - React, Tailwind, and code Playground

by Minchen Wang

HTML

<div class="wrapper">
  
</div>

CSS

.wrapper:hover {
  animation: 2s jumping;
}

.wrapper {
  background: red;
  width: 100px;
  height: 100px;
}

@keyframes jumping {
  0% {
    background: red;
    height: 100px;
  }
  37.5% {
    background: orange;
    height: 250px;
  }
  75% {
    background: red;
    height: 50px;
  }
  87.5% {
    background: yellow;
    height: 125px;
  }
  100% {
    background: red;
    height: 100px;
  }
}