如何在一個元素上進行多個CSS轉換？

Question

這是一個非常簡單的問題，但我無法在CSS轉換屬性中找到非常好的文檔。這裏是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); 
} 

正如你所看到的，過渡屬性是相互覆蓋的。就目前而言，文字陰影會產生動畫效果，但不是顏色。我如何讓它們同時動畫？感謝任何答案。

Answer 1

過渡特性逗號分隔在支持過渡所有瀏覽器：

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

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

Answer 2

像下面將同時允許多個轉換：

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

你也可以簡單地顯著有：

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

Answer 4

這裏有一個不太混入，用於轉換一次兩個屬性：

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

Answer 5

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

Answer 6

如果你的所有屬性的動畫一樣，你可以單獨設置每一個，這將允許你不重複代碼。

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

有更多一點的位置：CSS transition shorthand with multiple properties?

我會避免使用所有（過渡屬性將覆蓋「全部」）的財產，因爲你可以用不必要的行爲和意外的性能命中結束。

Answer 7

不要忘記，transition: all是Safari瀏覽器/ iPad的非常錯誤：http://joelglovier.com/writing/solution-for-css-transitions-crashing-safari/