【问题标题】:CSS animation keyframe with smooth movement平滑移动的 CSS 动画关键帧
【发布时间】:2015-01-05 08:19:04
【问题描述】:

我在降落伞猫上做一个钟摆动画(为了哈哈),但是当它向左移动时它更平滑。据我所知,所有轻松选项都有相同的问题。我可以用纯 javascript 来实现,但 css 过去更流畅,CPU 消耗更少。

测试:http://jsfiddle.net/sombra2eternity/qmb2qhz4/2/

transform-origin:50px 5px;
transition:transform 1s ease-in-out 0s;
animation-duration: 2.2s;
animation-name: paragato;
animation-iteration-count: infinite;
animation-direction: alternate;

注意:在 Firefox (33) 中根本无法使用,已打开错误:https://bugzilla.mozilla.org/show_bug.cgi?id=1095916

【问题讨论】:

    标签: javascript html css animation


    【解决方案1】:

    你需要添加

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

    transition 计时函数未应用于动画,因此您的测试没有显示任何差异。并且您希望ease-in-out 两端都顺利。

    http://jsfiddle.net/ww31468f/

    【讨论】:

    • @MarcosFernandezRamos 如果答案解决了您的问题,您可以单击答案左侧的复选标记将其标记为正确。然后两个人都会获得一些声誉
    猜你喜欢
    • 2015-06-22
    • 2020-01-07
    • 2019-03-11
    • 1970-01-01
    • 2017-05-10
    • 1970-01-01
    • 2015-08-23
    • 1970-01-01
    相关资源
    最近更新 更多