4

I'm trying to animate an element rotating like someone starting a top. At first, the element would rotate counter-clockwise before transitioning to rotating clockwise infinitely.

The general CSS I have is here:

div {
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

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

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

What I expect would happen is that the element would rotate counter clockwise for 800ms once (PreRotate animation) and then rotate clockwise infinitely after 800ms (Rotate animation). From the example http://jsfiddle.net/Fu5V2/6/ though, it seems like every clockwise rotation, the rotation 'hiccups'.

Could someone explain why this is happening and how the desired effect could be achieved? The independent animations seem right but chaining them together messes something up.

davidwen
  • 125
  • 2
  • 6

1 Answers1

4

I can't tell you exactly why this is happening, but apparently it's caused by the two animations overlapping at some point. If you delay the start of the second animation by something like 50ms, it plays fine:

div {
    display:inline-block;
    -webkit-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
}

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

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

JSFiddle

Hubro
  • 56,214
  • 69
  • 228
  • 381
  • It still had hiccups on 850ms delay for me but when I bumped it to 900ms, it worked great for me. Thanks! – davidwen Apr 29 '13 at 02:34
  • @davidwen: A 100ms delay is still probably to small to be noticed. Glad I could help! :-) – Hubro Apr 29 '13 at 07:22