html - 我可以使用什么 css 属性使我的弹跳动画更加流畅？

Question

我的 figure 有一个简单的动画反弹，请参阅下面的 HTML:

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

可以看到 fiddle HERE .

问题是我的动画很生涩，I.E.它没有实际的反弹效果，它看起来很明显很生涩。我的问题是，除了 % 断点之外，关键帧中还有哪些其他属性可以用来调整并使我的动画流畅？

调整 % 断点确实帮助我使动画更加流畅，但它确实还不真实。我可以使用哪些其他 CSS 动画属性来使此动画更流畅？

如果有人可以演示我如何完善并使动画更加流畅，那就太好了。

附言我知道库 animate.css 但不想使用它。

Answer 1

animation-timing-function属性(property)应该大大改善这一点。

尝试将以下内容添加到 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;

我已经编辑了你的 fiddle 以显示不同之处:https://jsfiddle.net/ssexmh3s/2/