如何正确使用多个属性的 CSS 过渡简写？

如何将 CSS 过渡简写与多个属性一起使用

CSS 过渡简写允许您在单个声明中指定多个过渡属性。这对于减少需要编写的代码量很有用。然而，找到正确的语法可能具有挑战性。

不正确的简写语法

提供的代码片段错误地使用了 CSS 转换简写：

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

问题出在不透明度过渡的第三个参数上。您无法在持续时间之后指定延迟。

正确的简写语法

具有多个属性的 CSS 转换简写的正确语法如下：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

请注意，持续时间必须在延迟之前，如果后者是

示例

要使用简写转换元素的高度和不透明度，您可以编写：

.element {
  transition: height 0.5s, opacity 0.5s;
}

或者，您可以一次转换元素的所有 CSS 属性：

.element {
  transition: all 0.5s;
}

通过使用CSS 过渡简写，您可以简化 CSS 代码并减少定义过渡所需的时间。

以上是如何正确使用多个属性的 CSS 过渡简写？的详细内容。更多信息请关注PHP中文网其他相关文章！