JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="animation"></div>

CSS

.animation {
  width: 350px;
  height: 350px;
  background-image: url(https://pixelbart.de/wp-content/uploads/2020/11/1.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.animation:hover {
  animation-name: bildwechsel;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes bildwechsel {
  0% {
    background-image: url(https://pixelbart.de/wp-content/uploads/2020/11/1.png);
  }
  50% {
    background-image: url(https://pixelbart.de/wp-content/uploads/2020/11/2.png);
  }
  75% {
    background-image: url(https://pixelbart.de/wp-content/uploads/2020/11/3.png);
  }
  100% {
    background-image: url(https://pixelbart.de/wp-content/uploads/2020/11/1.png);
  }
}