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>