JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div class='test'>

</div>

CSS

.test {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=1&w=350&h=150');
  width: 350px;
  height: 150px;
  animation: abc 10s steps(300) infinite alternate;
}
@keyframes abc {
  0% { background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=1&w=350&h=150'); }
  0.33% {background: red;}
  0.66% {background: blue;}
  0.99% {background: green;}
  100% { background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=10&w=350&h=150'); }
}