Class for highlighting elements on a page as TODO without altering page structure

js--todo.css

@keyframes seizure {
  from  {box-shadow: 0 0 0 4px #fd4b77,0 0 0 8px #fdf04b,0 0 0 12px #4bfdd0; }
  20%   {box-shadow: 0 0 0 4px #ffbd79,0 0 0 8px #fd4b77,0 0 0 12px #fdf04b; }
  40%   {box-shadow: 0 0 0 4px #514bfd,0 0 0 8px #ffbd79,0 0 0 12px #fd4b77; }
  60%   {box-shadow: 0 0 0 4px #f44bfd,0 0 0 8px #514bfd,0 0 0 12px #ffbd79; }
  80%   {box-shadow: 0 0 0 4px #4bfdd0,0 0 0 8px #f44bfd,0 0 0 12px #514bfd; }
  to    {box-shadow: 0 0 0 4px #fdf04b,0 0 0 8px #4bfdd0,0 0 0 12px #f44bfd; }
}

@keyframes throb {
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-45deg);
  }
}

.JS--todo {
  position: relative;
  box-shadow: 0 0 0 4px #f44bfd,0 0 0 8px #fdf04b,0 0 0 12px #fd4b77;
  border-radius: 5px;
  animation: seizure .5s forwards infinite steps(5,end);
}

.JS--todo::after {
  background-image: linear-gradient(to right, #88D060 0%, #109040 100%);
  font-size: 1rem;
  font-family: Arial;
  animation: throb 0.2s alternate linear infinite;
  content: '#TODO';
  color: white;
  border-radius: 4px;
  position: absolute;
  display: block;
  padding: 10px;
  z-index: 200;
  top: -20px;
  left: -20px;
  transform: translate(-50%, -50%) scale(0.8) rotate(-45deg);
  box-shadow: -5px 5px 0 rgba(0,0,0,.5);
  opacity: 0.8;
}