css的transition详解

CSS的transition属性是一个简写属性，用于设置四个过渡效果属性，以在元素的状态改变时创建平滑的动画效果。这四个属性分别是：

1. transition-property：

   • 定义应用过渡效果的CSS属性名称。当指定的CSS属性改变时，过渡效果将开始。例如，如果你想要元素的宽度变化时有过渡效果，你可以设置transition-property: width;。此外，你还可以使用all来指定所有属性变化时都应用过渡效果。

2. transition-duration：

   • 指定过渡效果的持续时间，即完成过渡效果需要多少秒或毫秒。例如，transition-duration: 2s;意味着过渡效果将在2秒内完成。这个属性是必需的，否则过渡效果不会产生，因为如果没有设置时长，默认为0。

3. transition-timing-function：

   • 定义过渡效果的速度曲线，控制过渡动画的速度变化。它可以有多个预定义的值，如ease（慢快慢）、linear（匀速）、ease-in（慢到快）、ease-out（快到慢）和ease-in-out（慢快慢）。此外，还可以使用cubic-bezier()函数来定义自定义的速度曲线。

4. 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触发的属性变化）一起使用，以确保在状态变化时能够观察到平滑的过渡效果。