JSFiddle - React, Tailwind, and code Playground

HTML

<div class="square"></div>

CSS

.square {
  height: 50px;
  width: 50px;
  background: #42a5f5;
    animation: snake .4s linear 1 infinite;
}
.xsquare:hover {
  animation: snake .4s linear 1 forwards;
}

@keyframes snake {
  0% {
    box-shadow: 0px -52px 0 2px white, -52px 0px 0 2px white, 0px 52px 0 2px white, 52px 0px 0 2px white, 0px 0px 0 2px black;
  }
  25% {
    box-shadow: -54px -52px 0 2px white, -52px 0px 0 2px white, 0px 52px 0 2px white, 52px 0px 0 2px white, 0px 0px 0 2px black;
  }
  50% {
    box-shadow: -54px -52px 0 2px white, -52px 54px 0 2px white, 0px 52px 0 2px white, 52px 0px 0 2px white, 0px 0px 0 2px black;
  }
  75% {
    box-shadow: -54px -52px 0 2px white, -52px 54px 0 2px white, 54px 52px 0 2px white, 52px 0px 0 2px white, 0px 0px 0 2px black;
  }
  100% {
    box-shadow: -54px -52px 0 2px white, -52px 54px 0 2px white, 54px 52px 0 2px white, 52px -54px 0 2px white, 0px 0px 0 2px black;
  }
}