CSS过渡属性不能用于选择器两次？

Question

CSS transition 属性未按预期运行

我正在尝试为不同的属性添加不同的转换，但正如我所料，transition 似乎不起作用。

---

这是我的 CSS 代码

* {
    transition: all .5s ease-in-out;
    transition: opacity 80ms linear;
    transition: background .2s ease-out;
  }

我可能在做一些非常明显的错误，但如果您能提供帮助，我将不胜感激。提前致谢！

Answer 1

多次声明同一个 CSS 属性将导致之前的声明被覆盖，并且只保留最后一个。 （假设他们有相同的specificity）。

你可以像这样用逗号分隔转换：

transition: all .5s ease-in-out, opacity 80ms linear, background .2s ease-out;

---

演示：

* {
    transition: all .5s ease-in-out, opacity 2s linear, background 4s ease-out;
}

div {
    padding: 100px;
    background-color: red;
    color: white;
    opacity: 0.4;
}

div:hover {
    font-size: 20px;
    opacity: 1;
    background-color: blue;
}

<div>hover this</div>