如何将CSS3过渡应用于除background-position之外的所有属性？

Question

我想将CSS转换应用于除background-position之外的所有属性.我试着这样做:

.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;
}

首先,我将所有属性设置为转换,然后我尝试仅覆盖background-position属性的转换.

然而,这似乎也重置了所有其他属性 - 所以基本上没有任何过渡似乎再发生.

有没有办法在不列出所有属性的情况下执行此操作？

Answer 1

这是一个适用于Firefox的解决方案:

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

我做了一个小演示:http://jsfiddle.net/aWzwh/

Answer 2

希望不要迟到.它只使用一条线完成!

-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; 

这适用于Chrome.您必须使用逗号分隔CSS属性.

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

Answer 3

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

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

http://jsfiddle.net/H2jet/60/