CODEWITHSUNDEEP
css
Lunaetic
Lunaetic

Reputation: 229

Infinite CSS animation stops before restarting

I'm trying to animate an image so that it keeps spinning infinitely, because it shall represent a loading process. The image is this one if you cannot imagine what I mean:
Loading image
The problem is that after the animation has run it always stops for a moment. What can I do about it? Is there any way to make the transition fluent?

Here's the jsfiddle, where I replaced the image with a div

And the CSS seperately:

.load { /* load is a little div in this case */
height: 20px;
width: 20px;
border: 2px solid black;
animation-name: myAni;
animation-timing: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0;
-webkit-animation-name: myAni;
-webkit-animation-timing: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
}

@keyframes myAni {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

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

Upvotes: 0

Views: 340

Answers (1)

Martijn Wijns
Martijn Wijns

Reputation: 499

The problem is that animation-timing should be animation-timing-function, otherwise you get the default ease that causes the slow start and end. It was marked red in your JSFiddle.

Upvotes: 1

Related Questions