css - 如何将 CSS3 过渡应用于除背景位置之外的所有属性？

Question

我想将 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;
}

首先，我将所有属性设置为过渡，然后尝试仅覆盖 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/

Answer 4

试试这个...

* {
    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;
}

Answer 5

对于任何人都在寻找一种速记方式，为所有属性添加转换，除了一个具有延迟的特定属性，请注意即使是现代浏览器之间也存在差异。

下面的简单演示显示了差异。查看完整代码

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

Chrome 将“组合”这两个动画（正如我所期望的那样），如下所示：

虽然 Safari “分离”了它（这可能不是预期的）：

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

Answer 6

尝试：

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

这对我有用。