好吧,我的这个旋转 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;
}
有人可以阐明这个主题吗?
最佳答案
我不确定你想要达到什么目的,但它来回旋转的原因是因为你在关键帧 70% 处声明旋转是 360,然后在 75 处声明它是旋转 0,所以它会回到原来的状态。
动画属性也应该在 span.star 元素中声明,而不是在关键帧中。
这是一个演示: http://jsfiddle.net/3VrjE/
关于debugging - 带延迟的 CSS3 旋转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7782294/