CSS转场时要指定多个属性怎么写

这次，我将解释一下当你想指定多个transition属性（ ）transition-property时如何编写。

指定多个transition-property时怎么写

总之，它会写成这样：

.btn {
  transition: opacity 300ms, color 300ms;
  color: #333;
}
.btn:hover {
  color: #fff;
  opacity: 0.8;
}

请注意，您必须每次指定每个属性的秒数。不可能省略它，因为秒数是相同的。

大多数情况下，transition只指定要应用的属性和秒数就足够了，所以上面的写法是可以的。

如何用简写形式写过渡

transition当用速记形式书写时，顺序如下：括号中的值为默认值。

1. 过渡性质（全部）

2. 过渡持续时间（0）

3. 转换定时函数（ease）

4. 转换延迟（0）

重要的transition-property是transition-duration。

transition-propretytransition指定要应用于的 CSS 属性。CSS 属性可以按原样编写。

如果省略，则为默认值，因此它将all任意应用于所有属性。transition

.btn1 {
  transition: 300ms;
}

.btn2 {
  transition: opacity 300ms;
}

.btn3 {
  transition: opacity 300ms, background-color 500ms;
}

然而，transition-property省略它通常会导致难以理解的错误，所以一定要每次都指定它（说真的，这种情况发生了很多）。

尤其是在Chrome中，长期以来一直存在一个transition“加载页面时自动触发”的bug。

transition-property通过指定可以在一定程度上避免它，但是如果因为麻烦而省略，transition加载页面时就会闪烁。

请务必从避免此类错误的意义上指定它。

另外，transition-duration指定动画的秒数。单位可以指定为“秒 (s)”或“毫秒 (ms)”。

就像“1000ms = 1s”、“300ms = 0.3s”。两者都可以。

结语

transition当您想要使用 指定多个属性时，您需要确定每个属性的秒数。

另外，transition-property省略可能会导致意外的错误，因此请务必指定它。