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

【问题标题】：What css property can i use to make my bounce animation much more smoother ?我可以使用什么 css 属性来使我的弹跳动画更加流畅？
【发布时间】：2016-01-22 22:32:10
【问题描述】：

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

小提琴可见HERE。

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

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

如果有人能展示我如何完善并使这个动画更加流畅，那就太好了。

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

【问题讨论】：

尝试使用不同的animation-timing-function。默认的linear 会很刺耳。 ease-in-out 可能是理想的。
@NiettheDarkAbsol 嗯谢谢你的建议，让我看看！ :)
@AlexanderSolonik：甚至使用cubic-bezier 的自定义缓动函数可能会有所帮助。顺便说一句，我在 Chrome 上，动画看起来并不那么生涩。它相当顺利。
如果您的关键帧中有特定的停止点，您应该查看三次贝塞尔曲线选项（animation-timing-function 属性）

标签： html css animation css-animations

【解决方案1】：

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/

【讨论】：