Как связать бесконечную css-анимацию с одноразовой css-анимацией?

Я пытаюсь оживить элемент, вращающийся, как кто-то запускает волчок. Сначала элемент будет вращаться против часовой стрелки, прежде чем перейти к бесконечному вращению по часовой стрелке.

Общий CSS у меня здесь: 

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

Я ожидаю, что элемент будет вращаться против часовой стрелки в течение 800 мс один раз (предварительная анимация), а затем вращаться по часовой стрелке бесконечно после 800 мс (анимация поворота). Из примера http://jsfiddle.net/Fu5V2/6/ хотя, кажется, что каждый поворот по часовой стрелке, вращение "икота".

Может ли кто-нибудь объяснить, почему это происходит и как можно достичь желаемого эффекта? Независимые анимации кажутся правильными, но связывание их вместе что-то портит.
1 4
css css3 css-animations

1 ответ:

Я не могу сказать вам точно Почему это происходит, но, по-видимому, это вызвано наложением двух анимаций в какой-то момент. Если вы задержите начало Второй анимации примерно на 50 мс, она будет воспроизводиться нормально: 

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

4