Flip element with css continuously without action

I want to flip an element continuously along the y axis from 0 to 360 degrees using css without action (button, hover).

Some scripts allow you to do this once by adding a class, for example: animate.css

And another click on the button ( http://desandro.imtqy.com/3dtransforms/docs/card-flip.html ) or hover ( http://davidwalsh.name/demo/css-flip.php )

.img:hover {
   transform: rotateY(360deg);
   transition: transform 10s;
}

This is what I have tried so far, but it only works once and only on hover ...

Can you help me get the code?

+4
source share
2 answers

CSS .

img {
    -webkit-animation: anim 10s infinite linear;
    animation: anim 10s infinite linear;
}

@-webkit-keyframes anim {
    from {-webkit-transform: rotateY(0deg);}
    to {-webkit-transform: rotateY(360deg);}
}

@keyframes anim {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}
+6

animation-iteration-count: infinite; , ?

.loopInfinitely { animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; }

0

All Articles