JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div class="container">
  
  <div class="animation2"></div>

</div>

CSS

.animation2 {
  width: 180px;
  height: 270px;
  background-image: url(https://wegerl.at/wp-content/uploads/2020/10/wegerl-roboti2.svg);
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.animation2:hover {
  animation-name: bildwechsel2;
  animation-duration: 3.5s;
  animation-delay: 0.5s;
  animation-timing-function: step-start, ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; /* Das ist neu */
}

@keyframes bildwechsel2 {
  0% {
    background-image: url(https://wegerl.at/wp-content/uploads/2020/10/wegerl-roboti-maske.svg);
  }
  10% {
    background-image: url(https://wegerl.at/wp-content/uploads/2020/12/wegerl-roboti-soso2.svg);
  }
  50% {
    background-image: url(https://wegerl.at/wp-content/uploads/2020/10/wegerl-roboti2.svg);
  }
  100% {
    background-image: url(https://wegerl.at/wp-content/uploads/2020/10/wegerl-roboti-maske.svg);
  }
}