Question

对于常规浏览器和CSS3支持的代码，我有-webkit-的以下代码。

但是，我应该为以下属性设置什么值：

-webkit-transition-property: ????;

因为box-shadow的{{1}}值与-webkit-box-shadow相关的用法是-webkit-，因此，对于上述property，我应该使用box-shadow还是{{} 1}}？

Answer 1

如果您想要转换也使用供应商前缀的属性，则需要添加它们。

CSS示例：

.my-class {
    -webkit-transition: -webkit-box-shadow 1s;
       -moz-transition:    -moz-box-shadow 1s;
        -ms-transition:     -ms-box-shadow 1s;
         -o-transition:      -o-box-shadow 1s;
            transition:         box-shadow 1s;
}

使用无前缀的属性，它的工作方式如下：

.other-class {
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
        -ms-transition: color 1s;
         -o-transition: color 1s;
            transition: color 1s;
}

浏览器支持：

Answer 2

您应该使用相应的供应商前缀属性。

-webkit-transition-property: -webkit-box-shadow;
-moz-transition-property: -moz-box-shadow; /*For older versions of Firefox only*/
transition-property: box-shadow;

Answer 3

检查此示例：

div {
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;

    /* Safari */
    -webkit-transition-property: width;
    -webkit-transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 2s;
}

与（使用速记版本）相同：

div {
            transition: width 1s linear 2s;
    -webkit-transition: width 1s linear 2s; /* Safari */
}

这里http://caniuse.com/#feat=css-transitions您可以找到何时需要转换前缀。这里有一个很好的例子http://jsfiddle.net/davidThomas/XEWhk/1/来自另一个有很多帮助的类似问题。

transition-property，用于跨浏览器兼容性

3 个答案: