html - 无法让 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;

Updated jsFiddle