html - 保持动画的连续性

Question

我正在尝试使用 css 创建一个动画，想法是当导弹悬停时落下(检查底部的 fiddle 链接)旋转，以便它几乎保持垂直 问题是动画没有连续性有一些停顿我想我的问题就在这里

.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