微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css3中定义动画曲线的属性为

CSS3中的动画曲线属性是用来调整动画过程中的速度和缓动效果的。这个属性可以通过在关键帧中加入cubic-bezier(x1,y1,x2,y2)函数来设置动画曲线。

    /*基础cubic-bezier*/
    .Box {
        animation: move 2s cubic-bezier(0.42,0.58,1);
    }
    /*自定义cubic-bezier*/
    .Box2 {
        animation: move 2s cubic-bezier(0.25,0.1,0.25,1);
    }

css3中定义动画曲线的属性为

在上面的代码中,第一个例子返回的是基础cubic-bezier曲线,曲线平滑的过渡了动画的途中,使得动画看起来很平稳。而第二个例子中,我们将自定义了cubic-bezier曲线使得动画在前半段的过渡更为缓和,而在后半段动画变得更快更流畅。

这些都是非常基础的例子,你还可以通过cubic-bezier曲线的四个参数(x1,y2)来设置不同的动画曲线。从而不断增强你动画的独特性。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。