如何在一个元素上有多个CSS转换？

这是一个非常简单的问题，但我无法在CSS转换属性中find非常好的文档。 这里是CSS代码片段：

.nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; text-shadow: 0 -1.5em 0 rgba(255, 255, 255, 0.15); -webkit-transition: color .2s linear; -moz-transition: color .2s linear; -o-transition: color .2s linear; transition: color .2s linear; -webkit-transition: text-shadow .2s linear; -moz-transition: text-shadow .2s linear; -o-transition: text-shadow .2s linear; transition: text-shadow .2s linear; } .nav a:hover { color:#F7931E; text-shadow: 0 1.5em 0 rgba(247, 147, 30, 0.15); } 

正如你所看到的，转换属性覆盖了彼此。 就目前来看，文字阴影会生成animation，但不是颜色。 我如何让他们同时animation？ 感谢您的任何答案。

Answer 1

在所有支持转换的浏览器中，转换属性都以逗号分隔：

 .nav a { -webkit-transition: color .2s, text-shadow .2s; /* And so on... */ } 

Ease是默认的，所以你不必指定它。 如果你真的想要线性，你需要指定它，即-webkit-transition: color .2s linear, text-shadow .2s linear ;

Answer 2

你也可以简单地用：

 .nav a { -webkit-transition: all .2s; } 

Answer 3

类似下面的内容将允许同时进行多个转换：

 -webkit-transition: color .2s linear, text-shadow .2s linear; -moz-transition: color .2s linear, text-shadow .2s linear; -o-transition: color .2s linear, text-shadow .2s linear; transition: color .2s linear, text-shadow .2s linear; 

例如： http : //jsbin.com/omogaf/2

Answer 4

如果你所有的属性都是相同的animation，你可以分别设置每个属性，这样可以不用重复代码。

  transition: all 2s; transition-property: color, text-shadow; 

有更多关于它在这里： CSS过渡速记与多个属性？

我会避免使用属性all（transition-property overwrites'all'），因为最终可能会有不必要的行为和意外的性能命中。

Answer 5

 .nav a { transition: color .2s, text-shadow .2s; } 

Answer 6

不要忘记， transition: all Safari浏览器/ iPad的transition: all是非常多的： http : //joelglovier.com/writing/solution-for-css-transitions-crashing-safari/

Answer 7

这里是一个LESS mixin，用于一次转换两个属性：

 .transition-two(@transition1, @transition1-duration, @transition2, @transition2-duration) { -webkit-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -moz-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; -o-transition: @transition1 @transition1-duration, @transition2 @transition2-duration; transition: @transition1 @transition1-duration, @transition2 @transition2-duration; }