Debugging CSS3带延迟的旋转动画
好的,我有一个旋转的CSS3动画(动画中有一个重复的超时)几乎可以正常工作,但是我得到了一个非常奇怪的行为,动画看起来像是在动画中向后“跳跃” 我在JS Fiddle中有一个演示(编辑-请原谅长时间的延迟,这是动画的一个必要部分-长时间超时): 为了子孙后代,这里是我的CSSDebugging CSS3带延迟的旋转动画,debugging,animation,css,Debugging,Animation,Css,好的,我有一个旋转的CSS3动画(动画中有一个重复的超时)几乎可以正常工作,但是我得到了一个非常奇怪的行为,动画看起来像是在动画中向后“跳跃” 我在JS Fiddle中有一个演示(编辑-请原谅长时间的延迟,这是动画的一个必要部分-长时间超时): 为了子孙后代,这里是我的CSS #logo { position: relative; float: left; width: 175; height: 75px; margin: 0 0 16px; padding: 0; } @-webkit-ke
#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元素中声明,而不是在关键帧中声明 下面是一个演示:
就是这样!我没有完全理解CSS3语言的语法和语义是如何工作的,这绝对是我的错。