文章/答案/技术大牛

发布

社区首页 >问答首页 >我可以使用什么css属性来使我的弹跳动画更加流畅？

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

Stack Overflow用户

提问于 2016-01-22 14:19:12

回答 1查看 333关注 0票数 3

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

小提琴可以看到这里。

问题是我的动画很不稳定，也就是说它没有真实的反弹效果，它看上去很粗糙。我的问题是，除了%断点之外，关键帧中还有哪些其他属性可以用来调整和使动画平滑？

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

如果有人能展示我是如何完美的，让这个动画更加流畅，那就太好了。

我知道图书馆的animate.css，但不想使用它。

html

css

animation

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-22 14:26:53

动画.定时功能属性应该大大改善了这一点。

尝试在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/

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34948872

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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