CSS transition 属性详解

点击打开视频讲解更详细

公司主营业务：成都网站设计、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出泊头免费做网站回馈大家。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property 规定设置过渡效果的 CSS 属性的名称。
• transition-duration 规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function 规定速度效果的速度曲线。
• transition-delay 定义过渡效果何时开始。

默认值： all 0 ease 0

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

transition-property 属性

定义和用法

transition-property 属性规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）。

语法：transition-property: none|all|property;

默认值： all

案例：

transition-duration 属性

定义和用法

transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。

语法：transition-duration: time;

默认值： 0

案例：

transition-timing-function 属性

定义和用法

transition-timing-function 属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。

语法：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

默认值： ease

案例：

transition-delay 属性

定义和用法

transition-delay 属性规定过渡效果何时开始。

transition-delay 值以秒或毫秒计。

语法：transition-delay: time;

默认值： 0

案例：

若对您有帮助，请点击跳转到B站一键三连哦！感谢支持！