CSS Puzzle Animation

by Kevin Pliester

HTML

<div class="example"></div>

CSS

.example {
  background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-0.svg");
  width: 435.2px;
  height: 473.8px;
}

.example:hover {
  animation-duration: 0.5s;
  animation-name: puzzle;
  animation-iteration-count: infinite;
  /* unendlich */
  animation-direction: alternate;
  /* vor und zurück */
  animation-iteration-count: 2;
  /* die anzahl, 2 bedeutet also vor und zurück 1x */
}

@keyframes puzzle {
  0% {
    background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-0.svg");
  }

  25% {
    background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-25.svg");
  }

  50% {
    background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-50.svg");
  }

  75% {
    background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-75.svg");
  }

  100% {
    background-image: url("https://pixelbart.de/wp-content/uploads/2022/02/puzzle-100.svg");
  }
}