css - 使用转换延迟的错误

Question

我之前遇到了一些代码，发现它是基于转换延迟，如果它的属性是在转换本身之前设置的，则它不适用于转换。我想知道这是一个错误还是预期的行为。

我做了一个小笔来展示我的意思的一个例子：https ://codepen.io/itsharryfrancis/pen/pGBRBR

它本质上显示了以下之间的区别：

.test1 {
  .block {
    transition: background 1s;
    transition-delay: 1s;
  }
}

和

.test2 {
  .block {
    transition-delay: 1s;
    transition: background 1s;
  }
}

我猜这是否是由于 CSS 的级联性质造成的？

score 1 · Accepted Answer

因此，您面临的是速记属性的已知问题。

transition在这种情况下是速记属性

我可以用案例来解释margin

所以 margin 是 margin-top、margin-right、margin-bottom 和 margin-left 的简写

所以如果你这样做

margin-top: 20px;
margin : 10px;

margin 属性实际上会覆盖 margin-top；

在你的情况下transition是压倒一切的transition-delay

score 0 · Accepted Answer

  .block {
    transition-delay: 1s;
    transition-property: background;
    transition-duration: 1s;
  }

您需要指定属性和时间

2 回答 2