How to connect endless css animation with one-time css animation?

Question

I am trying to animate an element spinning like someone starting a peak. First, the element rotates counterclockwise until it rotates clockwise.

The general CSS that I have is:

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);} } 

It is expected that the element will rotate counterclockwise for 800 m once (PreRotate animation), and then rotate clockwise endlessly after 800 ms (rotate animation). From the example http://jsfiddle.net/Fu5V2/6/ , although this is similar to each clockwise rotation, the rotation is “hiccups”.

Can someone explain why this is happening and how you can achieve the desired effect? Independent animations seem correct, but there is something wrong with linking them together.

Answer 1

I can’t say exactly why this is happening, but this is apparently due to the fact that at some point two animations overlap. If you delay the start of the second animation by about 50 ms, it plays perfectly:

 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