CSS 如何将 CSS3 过渡应用于除背景位置以外的所有属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10604389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I apply CSS3 transition to all properties except background-position?
提问by Dine
I'd like to apply a CSS transition to all properties apart from background-position. I tried to do it this way:
我想对除背景位置之外的所有属性应用 CSS 转换。我试图这样做：
.csstransitions a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.csstransitions a {
-webkit-transition: background-position 0s ease 0s;
-moz-transition: background-position 0s ease 0s;
-o-transition: background-position 0s ease 0s;
-ms-transition: background-position 0s ease 0s;
transition: background-position 0s ease 0s;
}
First I set all properties to transition and then I tried to overwrite solely the transition for the background-position property.
首先，我将所有属性设置为过渡，然后尝试仅覆盖 background-position 属性的过渡。
However this seems to also reset all other properties - so basically none of the transitions seem to happen any more.
然而，这似乎也重置了所有其他属性 - 所以基本上没有任何转换似乎不再发生。
Is there a way to do this without listing all properties?
有没有办法在不列出所有属性的情况下做到这一点？
回答by Felix Edelmann
Here's a solution that also works on Firefox:
这是一个也适用于 Firefox 的解决方案：
transition: all 0.3s ease, background-position 1ms;
I made a small demo: http://jsfiddle.net/aWzwh/
我做了一个小demo：http: //jsfiddle.net/aWzwh/
回答by aldo.roman.nurena
Hope not to be late. It is accomplished using only one line!
希望不要迟到。仅使用一行即可完成！
-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;
That works on Chrome. You have to separate the CSS properties with a comma.
这适用于 Chrome。您必须用逗号分隔 CSS 属性。
Here is a working example: http://jsfiddle.net/H2jet/
这是一个工作示例：http: //jsfiddle.net/H2jet/
回答by Siva
Try this...
尝试这个...
* {
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;
}
回答by lucianmarin
You can try using the standard W3C way:
您可以尝试使用标准的 W3C 方式：
.transition { transition: all 0.2s, top 0s, left 0s, width 0s, height 0s; }
回答by iplus26
For anyone looks for a shorthand way, to add transition for all properties except for one specific property with delay, be aware of there're differencesamong even modern browsers.
对于任何寻找速记方式的人来说，要为所有属性添加过渡，除了一个带有 delay 的特定属性，请注意即使是现代浏览器之间也存在差异。
A simple demo below shows the difference. Check out full code
下面的一个简单演示显示了差异。查看完整代码
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:
Chrome 将“组合”这两个动画（就像我期望的那样），如下所示：
While Safari "separates" it (which may not be expected):
虽然 Safari 会“分离”它（这可能不是预期的）：
A more compatible way is that you assign the specific transition for specific property, if you have a delay for one of them.
一种更兼容的方法是，如果您对其中一个属性有延迟，则为特定属性分配特定转换。
回答by StuR
Try:
尝试：
-webkit-transition: all .2s linear, background-position 0;
This worked for me on something similar..
这对我有用。
