Flipping

by M Shameer

HTML

<!-- Apologies for using my own face, was the only image I could think of at the time! -->

      <div class="front">
        <img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="">
      </div>
      <div class="back">
        <img src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg" alt="">
      </div>

CSS

/* Set animation variables */
.front, .back {
  -webkit-animation-duration: 15s;
  -moz-animation-duration: 15s;
  -ms-animation-duration: 15s;
  animation-duration: 15s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  animation-timing-function: ease;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* Call the animations for each side of the card */
.front {
  -webkit-animation-name: cardFlipFront;
  -moz-animation-name: cardFlipFront;
  -ms-animation-name: cardFlipFront;
  animation-name: cardFlipFront;
}

.back {
  -webkit-animation-name: cardFlipBack;
  -moz-animation-name: cardFlipBack;
  -ms-animation-name: cardFlipBack;
  animation-name: cardFlipBack;
}

/* We have two seperate @keyframe animations for each side of the card so we can get this working in IE */

/* This one animates the front card */
@keyframes cardFlipFront {
  0% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  22.5% {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  27.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  72.5% {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  77.5% {
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
 ...