CSS3过渡 transition

最新推荐文章于 2024-04-25 16:16:15 发布

ANGWH

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量449

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ANGWH/article/details/105775975

版权

本文详细介绍了CSS3的过渡属性transition，包括transition-property、transition-duration、transition-timing-function和transition-delay。重点阐述了如何结合这四个属性创建平滑的过渡动画效果，特别是强调transition-duration的必要性和transition-timing-function在定义运动曲线中的作用。此外，还提到了cubic-bezier函数用于自定义过渡曲线，以及过渡的前进和反向阶段的概念。

摘要由CSDN通过智能技术生成

过渡transition是个复合属性，包括了transition-property、transition-duration、transition-timing-function、transition-delay这四个属性，配合这四个属性完成一个完整的过渡动画效果。其中transition-duration是是必需值且不能为0

只能规定开始和结束的状态

transition-property: 过渡属性，指定css属性名称transition效果（默认值为all 即所有属性都发生过渡效果）

transition-duration: 过渡效果过程花费的时间（单位：s/ms）（默认值为0s不产生过渡效果）

transition-timing-function: 指定完成过渡的曲线。

默认属性
linear：以匀速过渡。
ease：慢速开始，中间快速，以慢速结束。
ease-in：慢速开始。
ease-out：慢速结束。
ease-in-out：以慢速开始和结束。
除了这些外，还可以使用贝塞尔曲线来自定义
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值，cubic-bezier参数的取值范围： x y  x y x[0-1]