JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="red"></div>

CSS

.red {
  width: 100px;
  height: 100px;
  background: red;
  animation: bounce 3.6s ease-in 2s infinite;
}

@keyframes bounce {
  0% {transform: scale(1)}
  5% {transform: scale(1.2)}
  9% {transform: scale(1.09)}
  11% {transform: scale(0.85)}
  13% {transform: scale(1.07)}
  16% {transform: scale(1.006)}
  18% {transform: scale(0.95)}
  20% {transform: scale(0.98)}
  24% {transform: scale(1.005)}
  26% {transform: scale(1.002)}
  29% {transform: scale(1)}
}