JSFiddle - React, Tailwind, and code Playground

by mgoetzke

HTML

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

CSS

.square {
  height: 50px;
  width: 50px;
  background: white;
  animation: snake linear 1s infinite;
  overflow: hidden;
}

body {
  background:black;
}

.square:hover {
  animation: snake  linear 1s 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 #3498db;
  }
  12% {
    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 #3498db;
  }
  25% {
    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 #3498db;
  }
  38% {
    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 #3498db;
  }
  50% {
    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 #3498db;
  }
  51% {
    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 #3498db;
  }
}