CSS3 Rotating Animation with delay


Ok, so I have this rotating CSS3 animation (with a repeating timeout in the animation) almost working but I'm getting this really weird behavior where the animation seems to "jump" backward as it's animation.

I have a demo here in JS Fiddle (EDIT - Please excuse the long delay, it's a necessary part of the animation - a long timeout): http://jsfiddle.net/3mnMz/1/

For posterity, here is my CSS

#logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; }

@-webkit-keyframes rotate {
    0%, 65%, 75%, 100% {
    -webkit-transform: rotate(0deg);
    70% { 
    -webkit-transform: rotate(360deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-delay: 3s;
#logo span.star
    -webkit-animation-name:             rotate; 
    -webkit-animation-duration:         6s; 
    -webkit-animation-iteration-count:  infinite;

#logo span.star { width: 84px; height: 84px; background: url('../img/logo_star.png') no-repeat left top; position: absolute; top: -8px; right: -20px; display: block; 

Can someone shed some light on the subject?

Problem courtesy of: Brian


I'm not sure about what you're trying to achieve, but the reason why it's rotating back and forth is because you're stating at keyframe 70% that the rotation is 360, then at 75 that it's rotation 0, so it goes back to the original state.

The animation properties should also be stated within the span.star element, not within the keyframes.

Here is a demo: http://jsfiddle.net/3VrjE/

Solution courtesy of: Duopixel


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.