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

无法让css过渡到工作

1 个答案: