CSS的
transition
属性是一个简写属性,用于设置四个过渡效果属性,以在元素的状态改变时创建平滑的动画效果。这四个属性分别是:
-
transition-property:
- 定义应用过渡效果的CSS属性名称。当指定的CSS属性改变时,过渡效果将开始。例如,如果你想要元素的宽度变化时有过渡效果,你可以设置
transition-property: width;
。此外,你还可以使用all
来指定所有属性变化时都应用过渡效果。
- 定义应用过渡效果的CSS属性名称。当指定的CSS属性改变时,过渡效果将开始。例如,如果你想要元素的宽度变化时有过渡效果,你可以设置
-
transition-duration:
- 指定过渡效果的持续时间,即完成过渡效果需要多少秒或毫秒。例如,
transition-duration: 2s;
意味着过渡效果将在2秒内完成。这个属性是必需的,否则过渡效果不会产生,因为如果没有设置时长,默认为0。
- 指定过渡效果的持续时间,即完成过渡效果需要多少秒或毫秒。例如,
-
transition-timing-function:
- 定义过渡效果的速度曲线,控制过渡动画的速度变化。它可以有多个预定义的值,如
ease
(慢快慢)、linear
(匀速)、ease-in
(慢到快)、ease-out
(快到慢)和ease-in-out
(慢快慢)。此外,还可以使用cubic-bezier()
函数来定义自定义的速度曲线。
- 定义过渡效果的速度曲线,控制过渡动画的速度变化。它可以有多个预定义的值,如
-
transition-delay:
- 定义过渡效果何时开始,即过渡效果开始执行之前的延迟时间。它可以是秒或毫秒为单位的值,例如
transition-delay: 1s;
意味着过渡效果将在属性变化后的1秒后开始。默认值为0,意味着没有延迟。
- 定义过渡效果何时开始,即过渡效果开始执行之前的延迟时间。它可以是秒或毫秒为单位的值,例如
使用transition
简写属性时,这些子属性的语法如下:
transition: [property] [duration] [timing-function] [delay];
例如:
div {width: 100px;height: 100px;background-color: red;transition: width 2s ease-in-out 1s;
}div:hover {width: 200px;
}
在这个例子中,当鼠标悬停在div
元素上时,其宽度将在2秒内从100像素平滑过渡到200像素,使用ease-in-out
的速度曲线,并且在开始过渡前有1秒的延迟。
需要注意的是,为了使过渡效果生效,你必须确保至少定义了两个属性:transition-property
和transition-duration
。其他两个属性是可选的,但可以为过渡效果提供更多的控制和自定义。
此外,transition
属性应与触发状态改变的事件(如:hover
、:active
或JavaScript触发的属性变化)一起使用,以确保在状态变化时能够观察到平滑的过渡效果。