保持动画的连续性

我想用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/

来源

2014-09-20 Akshay

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

这应该给你一个连续的动画速度，而不是宽松（暂停）是默认设置。编号：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

来源

2014-09-20 16:09:13 kretzm

谢谢你，你真的帮我 – Akshay 2014-09-20 16:12:27

为了顺利的弧旋转，我认为你想要的，检查这个链接：http://stackoverflow.com/questions/25950360/only-certain-elements-responding-to-media-queries 他们围绕一个原点旋转，这可能更容易做到（看起来更自然），然后试图将导弹左移+下移并旋转 – kretzm 2014-09-20 16:16:54

尝试更新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-animation-iteration-count：infinite;”。到你的悬停.fire/.missile（例如，火并不会消失）。

来源

2014-09-20 16:12:52 quietbits

谢谢我不想让'火'保持这种方式，我只是需要它保持几秒钟即可 – Akshay 2014-09-20 16:15:13

保持动画的连续性

回答

相关问题