我可以使用哪些css属性使我的弹跳动画更平滑？

我在动画一个简单的反弹我figure，请参见下面的HTML：我可以使用哪些css属性使我的弹跳动画更平滑？

<figure> 
    <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt=""> 
    <figcaption> 
    <!-- empty for now --> 
    </figcaption> 
</figure>

我的CSS动画如下：

@keyframes drop-in-thumb { 
    0% { 
     -webkit-transform: translateY(-50px); 
     -ms-transform: translateY(-50px); 
     -o-transform: translateY(-50px); 
     transform: translateY(-50px); 
     opacity: 0.8; 
    } 
    35% { 
     -webkit-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
     opacity: 1; 
    } 
    55% { 
     -webkit-transform: translateY(-15px); 
     -ms-transform: translateY(-15px); 
     -o-transform: translateY(-15px); 
     transform: translateY(-15px); 
    } 
    70% { 
     -webkit-transform: translateY(0px); 
     -ms-transform: translateY(0px); 
     -o-transform: translateY(0px); 
     transform: translateY(0px); 
    } 
    85% { 
     -webkit-transform: translateY(-5px); 
     -ms-transform: translateY(-5px); 
     -o-transform: translateY(-5px); 
     transform: translateY(-5px); 
    } 
    100% { 
     -webkit-transform: translateY(0); 
     -ms-transform: translateY(0); 
     -o-transform: translateY(0); 
     transform: translateY(0); 
     opacity: 1; 
    } 
}

小提琴可以看出HERE。

问题是我的动画相当生涩，I.E.它没有实际的反弹效果，它看起来很明显很干。我的问题是关键帧中的其他属性除了可以用来调整和使动画流畅的％breakpoints吗？

调整％断点确实帮助我使动画更平滑，但它的确不现实。我可以使用其他哪些CSS动画属性使此动画更流畅？

如果有人能够演示我如何完美并使这部动画更加流畅，那将会很棒。

P.S.我知道animate.css库，但不想使用它。

来源

2016-01-22 Alexander Solonik

尝试使用不同的'动画时序function'。默认的“线性”将会非常糟糕。 “缓入”可能是理想的。 –

@NiettheDarkAbsol嗯，谢谢你的建议，让我看看！ :) –

@AlexanderSolonik：甚至使用'cubic-bezier'自定义缓动函数可能会有帮助。顺便说一下，我使用的是Chrome浏览器，动画看起来并不真实。它相当平滑。 – Harry

animation-timing-function属性应该大大改善。

尝试添加以下的样式figure：

-webkit-animation-timing-function: ease-in-out; 
-moz-animation-timing-function: ease-in-out; 
-o-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;

我已经编辑您的提琴以示区别：https://jsfiddle.net/ssexmh3s/2/

来源

2016-01-22 14:26:53 Kelvin

我可以使用哪些css属性使我的弹跳动画更平滑？

回答

相关问题