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);}  
}

要获得平滑的动画，您需要计算每个％步骤中需要更改的精确距离（margin-top，margin-left）。在这种情况下，我认为你不需要添加太多步骤。

另外，如果要重复动画，可以添加“-webkit-animation-iteration-count：infinite;”你的悬停.fire / .missile（火不会消失，例如）。

保持动画的连续性

2 个答案: