html - 无法让 css 过渡到工作

Question

我有这个按钮，我想制作动画。为了实现这个动画，我想使用colorand 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

You need to set the properties all at once, like this:

-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