css3新增过渡

冰暮流星2025-11-08 19:35

过渡的属性是transition,它是指从一种样式转换为另外一种样式

细分属性

transition-property

指定应用过渡效果的 CSS 属性名称，多个属性用逗号分隔。

transition-duration

定义过渡效果持续时间，单位为秒（s）或毫秒(ms)

transition-timing-function

控制过渡的速度曲线，常见值包括：

transition-delay

设置过渡效果延迟触发的时间

比如设置一个div,宽度为300px，鼠标放上去为600像素

假定要设置过渡效果，过渡时间是3s,速度是由快到慢，延迟2s

css代码如下

css 复制代码

transition-property: width;
transition-duration: 3s;
transition-timing-function: ease-in-out;
transition-delay: 2s;

其中transition-property是设置过渡的样式是width

transition-duration是设置过渡时间是3秒

transition-timing-function:设置速度从快到慢

transition-delay:设置延迟2秒

transition可以设置简写

css 复制代码

transition:width 5s linear 0s;

这段简写代码表示过渡的样式是width,过渡时间是5秒，速度是匀速运动，延迟0秒