连续翻转动画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);
    }
}