保持动画的连续性

Question

我试着用css创建一个动画，这个想法是当导弹悬停下来(检查底部的小提琴链接)旋转，使它保持几乎垂直，问题是动画没有连续性，有一些停顿，我想我的问题是这里。

.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}

@-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}  

}

http://jsfiddle.net/tuuqhgk3/2/

Answer 1

.boy:hover~ .missile{
  -webkit-animation:anim2 10s;
  -webkit-animation-timing-function: linear;
} 

这应该会给你一个持续的动画速度，而不是默认设置的放松(暂停)。参考文献：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Answer 2

尝试将您的anim2更新为：

@-webkit-keyframes anim2 {
    0% {margin-left: 280px; transform: rotate(220deg);}
    15% {margin-top: 80px;}
    100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}  
}

要获得平滑的动画，您需要计算精确的距离(边距-顶，边距-左)，这些距离需要在每一步中更改。我不认为在这种情况下你需要增加太多的步骤。

此外，如果你想重复动画，你可以添加“-webkit-动画-迭代-计数:无限；”到你的悬停.火/.飞弹(火不会消失，例如)。