CSS3延迟旋转动画答案

【问题标题】：CSS3 Rotating Animation with delayCSS3延迟旋转动画
【发布时间】：2011-10-16 21:18:06
【问题描述】：

好的，所以我有这个旋转的 CSS3 动画（在动画中重复超时）几乎可以工作，但是我得到了这个非常奇怪的行为，动画似乎在动画时向后“跳跃”。

我在 JS Fiddle 中有一个演示（编辑 - 请原谅长时间的延迟，这是动画的必要部分 - 长时间超时）：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; 
}

有人能解释一下这个主题吗？

【问题讨论】：

标签： debugging animation css

【解决方案1】：

我不确定您要实现什么，但它来回旋转的原因是因为您在关键帧 70% 处声明旋转为 360，然后在 75 处声明旋转为 0，所以它会回到原来的状态。

动画属性也应该在 span.star 元素中声明，而不是在关键帧中。

这是一个演示： http://jsfiddle.net/3VrjE/

【讨论】：

就是这样！绝对是我没有完全理解 CSS3 语言的语法和语义是如何工作的。