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>

Answer 2

在一行中完成所有工作。

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

#watch_me_baby_i_will_move {
    height:200px;
    width:200px;
    background:red;
    transition: transform 10s linear,background .2s ease-out;
  }
  #watch_me_baby_i_will_move:hover {
    transform: translate(50%);
    background: green;
  }

<div id="watch_me_baby_i_will_move"></div>