CODEWITHSUNDEEP
csshtml
Prosto Trader
Prosto Trader

Reputation: 3527

Continious flip animation css

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); }
}

Upvotes: 0

Views: 1087

Answers (2)

Kheema Pandey
Kheema Pandey

Reputation: 10265

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/

Upvotes: 2

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

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);
    }
}

Upvotes: 2

Related Questions