CSS3延迟旋转动画

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

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

有人可以对这个问题有所了解吗？

来源

2011-10-16 Brian

我不确定你想要实现什么，但它来回旋转的原因是因为你在关键帧70％中说旋转是360，然后在75它是旋转0 ，所以它回到原来的状态。

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

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

来源

2011-10-16 13:18:06 Duopixel

这就是它！我完全理解CSS3语言的语法和语义是如何工作的，这绝对是我的错。 – Brian

CSS3延迟旋转动画

回答

相关问题