CSS3 вращающаяся анимация с задержкой

Question

Хорошо, у меня почти работает эта вращающаяся анимация CSS3 (с повторяющимся таймаутом в анимации), но я получаю это действительно странное поведение, когда анимация, кажется, «прыгает» назад по мере анимации.

У меня есть демо здесь в JS Fiddle ( EDIT - извините за большую задержку, это необходимая часть анимации - длительный таймаут ): http://jsfiddle.net/3mnMz/1/

Для потомков вот мой 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; 
}

Может кто-нибудь пролить свет на эту тему?

Answer 1

Я не уверен в том, что вы пытаетесь достичь, но причина, по которой он вращается взад и вперед, заключается в том, что вы указываете на ключевом кадре 70%, что вращение составляет 360, а затем на 75, что это вращение 0,поэтому он возвращается к исходному состоянию.

Свойства анимации также должны указываться в элементе span.star, а не в ключевых кадрах.

Вот демонстрационная версия: http://jsfiddle.net/3VrjE/