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

可以看到小提琴 HERE 。

问题是我的动画非常生涩，I.E。它实际上没有真实的反弹，看起来显得非常生涩。我的问题是关键帧中的其他属性除了％断点可以用来调整和使我的动画流畅吗？

调整％断点真的帮助我让动画更加流畅，但它真的还不现实。我可以用什么其他CSS动画属性来使这个动画更流畅？

如果有人能够展示我如何完美并使这个动画更加顺畅，那将是很棒的。

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

Answer 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/

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

1 个答案: