JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filter-shadow">Hover to animate filter</div>

<div id="opacity-shadow">Hover to animate opacity
<span>Hover to animate opacity</span></div>

CSS

@keyframes filter-shadow-animation {
  0% { filter: none; }
  50% {
    filter: drop-shadow(0px 0px 30px #000)
            drop-shadow(0px 0px 10px #333)
            drop-shadow(0px 0px 5px #333);
  }
  100% { filter: none; }
}

@keyframes opacity-shadow-animation {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

#filter-shadow {
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 200%;
}
#filter-shadow:hover {
  animation: filter-shadow-animation 1s infinite;
}

#opacity-shadow {
  position: absolute;
  top: 200px;
  left: 100px;
  font-size: 200%;
}
#opacity-shadow span {
  color: rgba(0, 0, 0, 1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  filter: drop-shadow(0px 0px 30px #000)
    drop-shadow(0px 0px 10px #333)
    drop-shadow(0px 0px 5px #333);
  opacity: 0;
}
#opacity-shadow:hover span {
  animation: opacity-shadow-animation 1s infinite;
}