How do I chain an infinite css animation to a one-time css animation?

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/16269787/how-do-i-chain-an-infinite-css-animation-to-a-one-time-css-animation

标签

css

css3

css-animations