如何将无限CSS动画链接到一次性CSS动画？ [英] How do I chain an infinite css animation to a one-time css animation?

问题描述

我想让一个元素旋转像一个人开始一个顶部。

一般的CSS我在这里：

  div {
动画：
 PreRotate 800ms缓解0ms 1，
旋转500m​​s线性无限800ms; 
} 
 
 @ -keyframes PreRotate {
 from {transform：rotate（0deg）;} 
 to {transform：rotate（-360deg）;} 
} 
 
 @ -keyframes从{transform：rotate（0deg）;}将
旋转到{transform：rotate（360deg）;} 
} $ b我会期望会发生的是，元素将逆时针旋转800ms一次（PreRotate动画），然后旋转顺时针无限后800ms（旋转动画）。从示例 http://jsfiddle.net/Fu5V2/6/ 虽然，似乎每个顺时针旋转，旋转'hiccups'。
 
 
 
有人可以解释为什么会发生这种情况，以及如何实现期望的效果？ 
解决方案
我不能确切地告诉你为什么这是发生，但显然它是由两个动画重叠在某一点造成的。如果你延迟第二个动画的开始时间为50ms，它会很好：
  div {
 display：内联块; 
 -webkit-animation：
 PreRotate 800ms缓解0ms 1，
旋转500m​​s线性850ms无限; 
动画：
 PreRotate 800ms缓解0ms 1，
旋转500m​​s线性850ms无限; 
} 
 
 @ -webkit-keyframes将{
从{-webkit-transform：rotate（0deg）;} 
旋转到{-webkit-transform：rotate 360deg）;} 
} 
 @ -webkit-keyframes PreRotate {
 from {-webkit-transform：rotate（0deg）;} 
 to {-webkit-transform：rotate -360deg）;} 
} 
 
 @keyframes将{
从{-webkit-transform：rotate（0deg）;} 
旋转到{-webkit-transform：旋转（360deg）;} 
} 
 @keyframes PreRotate {
 from {-webkit-transform：rotate（0deg）;} 
 to {-webkit-transform：rotate 360deg）;} 
} 
  
 
 
 
  JSFiddle  
 
I'm trying to animate an element rotating like someone starting a top. At first, the element would rotate counter-clockwise before transitioning to rotating clockwise infinitely.

The general CSS I have is here:
div {
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear infinite 800ms;
}

@-keyframes PreRotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(-360deg);}
}

@-keyframes Rotate {
    from { transform:rotate(0deg);}
    to { transform:rotate(360deg);}
}
What I expect would happen is that the element would rotate counter clockwise for 800ms once (PreRotate animation) and then rotate clockwise infinitely after 800ms (Rotate animation). From the example http://jsfiddle.net/Fu5V2/6/ though, it seems like every clockwise rotation, the rotation 'hiccups'.

Could someone explain why this is happening and how the desired effect could be achieved? The independent animations seem right but chaining them together messes something up.
解决方案
I can't tell you exactly why this is happening, but apparently it's caused by the two animations overlapping at some point. If you delay the start of the second animation by something like 50ms, it plays fine:
div {
    display:inline-block;
    -webkit-animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
    animation:
        PreRotate 800ms ease-out 0ms 1,
        Rotate 500ms linear 850ms infinite;
}

@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}

@keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes PreRotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(-360deg);}
}


JSFiddle

                        
这篇关于如何将无限CSS动画链接到一次性CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！