无法让 CSS 转换正常工作

Question

我有这个按钮，我想制作动画。为了实现这个动画，我想使用color和box-shadow。

问题是，过渡仅适用于一个，无论是color还是box-shadow。

请看一下，这是一个JSFiddle。

    -webkit-transition-property: box-shadow; -webkit-transition-duration: 0.1s; -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: box-shadow; -moz-transition-duration: 0.1s; -moz-transition-timing-function: ease-in-out;
    -o-transition-property: box-shadow; -o-transition-duration: 0.1s; -o-transition-timing-function: ease-in-out;
    transition-property: box-shadow; transition-duration: 0.1s; transition-timing-function: ease-in-out;
    -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out;
    -moz-transition-property: color; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease-in-out;
    -o-transition-property: color; -o-transition-duration: 0.2s; -o-transition-timing-function: ease-in-out;
    transition-property: color; transition-duration: 0.2s; transition-timing-function: ease-in-out;

我分别定位每个属性的原因是我想避免使用 all .

谢谢

Answer 1

您需要一次设置所有属性，如下所示：

-webkit-transition:
    box-shadow 0.1s ease-in-out,
    color 0.2s ease-in-out;
-moz-transition:
    box-shadow 0.1s ease-in-out,
    color 0.2s ease-in-out;
-o-transition:
    box-shadow 0.1s ease-in-out,
    color: 0.2s ease-in-out;
transition:
    box-shadow 0.1s ease-in-out,
    color: 0.2s ease-in-out;

更新的 jsFiddle