JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<div class="q">
</div>
<div class="w">
</div>
<div class="e">
</div>

CSS

@keyframes shadow {
from {left: -500px ;}
5% {left: -400px ;}
10% {left: -400px ;}
15% {left: -300px ;}
20% {left: -200px ;}
25% {left: -100px ;}
30% {left: -50px ;}
35% {left: 50px ;}
40% {left: 100px ;}
45% {left: 200px ;}
50% {left: 300px ;}
55% {left: 200px ;}
60% {left: 100px ;}
65% {left: 50px ;}
70% {left: -50px ;}
75% {left: -100px ;}\
90% {left: -200px ;}
to {left: -400px ;}
}
.q{
  border:2px solid blue;
}
.w{
  border:2px dotted blue;
  animation: shadow  2s infinite ease-in-out;
  position:relative;
}
.e{
  border:2px solid black;
}