如何将 CSS3转换应用于除背景位置之外的所有属性？

小开

试试:

-webkit-transition: all .2s linear, background-position 0;

这种方法对我很有效。

小开

希望不要迟到，只用一句话就完成了！

-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;

你必须用逗号分隔 CSS 属性。

下面是一个工作示例: http://jsfiddle.net/H2jet/

小开

试试这个..。

* {
transition: all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
}
a {
-webkit-transition: background-position 1ms linear;
-moz-transition: background-position 1ms linear;
-o-transition: background-position 1ms linear;
transition: background-position 1ms linear;
}

小开

最佳答案

这里有一个同样适用于 Firefox 的解决方案:

transition: all 0.3s ease, background-position 1ms;

我做了一个小样本: http://jsfiddle.net/aWzwh/

小开

您可以尝试使用标准的 W3C 方式:

.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }

Http://jsfiddle.net/h2jet/60/

小开

对于任何寻找速记方法的人来说，要为所有属性 除了一个特定的延迟财产添加转换，请注意即使在现代浏览器中也存在分歧。

下面的一个简单演示展示了两者的区别

div:hover {
width: 500px;
height: 500px;
border-radius: 0;
transition: all 2s, border-radius 2s 4s;
}

Chrome will "combine" the two animation (which is like I expect), like below:

而 Safari“分离”了它(这可能是意料之外的) :

一种更兼容的方法是，如果其中一个属性有延迟，则为特定属性分配特定的转换。