特定属性的css3转换延迟

Question

目前我正在通过更改悬停时的背景颜色和字体颜色来设置文本框的样式：

transition: background-color 1s, color 1s;

我现在想通过使用过渡延迟来更改背景颜色之后的颜色。问题是转换延迟不采用我想要延迟的PROPERTY（即颜色）。有没有办法只延迟特定的属性？

Answer 1

转换延迟是特定于属性的。

例如

transition: background-color 1s linear 2s, color 1s;
transition: property name | duration | timing function | delay

在使用简写时，似乎还需要指定计时函数。

（来源）

Answer 2

li {
  transition-duration: 0.4s, 0.4s, 0.4s, 0.4s, 0.4s;
  transition-delay: 0s, 0s, 0s, 0s, 0s;
  transition-property: transform, opacity, visibility, color, background-color;
}
li:nth-of-type(1) {
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}
li:nth-of-type(2) {
  transition-delay: 0.1s, 0.1s, 0.1s, 0s, 0s;
}

Answer 3

好消息是，您可以为特定的css属性配置转换参数，即transition-delay、transition-duration等。不幸的是，不能为同一元素上的不同css属性指定不同的参数。例如，这不起作用：

.elem {
    transition: background-color 2s 0.5s ease; // want background-color to transition differently
    transition: opacity 3s 1.5s ease;          //this unfortunately overrides the previous line
}

在这种情况下，我建议使用@keyframes的动画。代码有点复杂，但您可以更自由地应用时间、持续时间等。