如何在transition属性中为多个属性指定多个transition - CSS

CSS中的transition属性可用于将一个或多个CSS属性的变化平滑地过渡到新值。它使得元素的状态更加渐变和平滑。而对于多个属性，如果需要分别指定多个transition时，可以使用逗号分隔指定。

语法

transition: property1 duration1 timing-function1 delay1, property2 duration2 timing-function2 delay2, ...;

参数

• property: 需要平滑过渡的属性名称。
• duration: 过渡持续时间。
• timing-function: 过渡动画的速度曲线。
• delay: 过渡动画开始前的延迟时间。

示例

假设我们需要对元素的width和height属性进行平滑过渡，让它们从100px变成200px，并从线性平滑过渡到渐变平滑过渡。可以这样写CSS：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s ease-in-out 1s, height 2s cubic-bezier(0.0, 0.5, 0.5, 1.0) 1s;
}

div:hover {
  width: 200px;
  height: 200px;
}

在这个示例中，我们使用了两个transition属性，分别指定了需要平滑过渡的width和height属性，同时为它们指定了不同的动画持续时间、速度曲线和延迟时间。

运行效果如下：

总结

在CSS中，transition属性可以将一个或多个属性的变化过渡为新值，并提供多个属性进行分别指定多个transition的选项。同时，需要注意设置合适的动画持续时间、速度曲线和延迟时间，以达到最佳的过渡效果。