Continious flip animation css

Question

Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation ?

@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}

Answer 1

Below is the script for flip animation using keyframes

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.flip-animation {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  animation-duration: 4.5s;   
}

Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/

Answer 2

There you go FIDDLE

Now you can play around with rotations on different axis. for example, -webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.

.center {
    width:300px;
    margin:auto;
    margin-top:100px;
    -webkit-perspective:250px;
    perspective:250px;
}
.animation-rotate {
    margin:auto;
    -webkit-animation:coinflip 2s infinite linear;
    animation:coinflip 2s infinite linear;
}
@-webkit-keyframes coinflip {
    0% {
        -webkit-transform:rotateY(-1deg);
    }
    100% {
        -webkit-transform:rotateY(360deg);
    }
}
@keyframes coinflip {
    0% {
        transform:rotateY(0deg);
    }
    100% {
        transform:rotateY(360deg);
    }
}