如何在嵌套元素上並行創建兩個CSS轉換

Question

嘗試使用引導圖形創建簡單鏈接。懸停時，a的background-color以及字形的字體color都會發生變化。

然而，當嘗試添加css transition時，轉場依次出現（首先是bgcolor，然後是內容的顏色），而不是並行。

我想：

.alltransition, .alltransition * 
{ 
-webkit-transition:background-color .2s linear, color .2s linear; 
-moz-transition: background-color .2s linear, color .2s linear; 
-o-transition: background-color .2s linear, color .2s linear; 
transition: background-color .2s linear, color .2s linear; 
} 

和

.alltransition, .alltransition * 
{ 
-webkit-transition:all .2s linear; 
-moz-transition:all .2s linear; 
-o-transition: all .2s linear; 
transition: all .2s linear; 
} 

HTML

<a class="play alltransition" href="#"> 
    <span class="glyphicon glyphicon-play"></span> 
</a> 

JS FIDDLE

Answer 1

您是否試圖刪除.alltransition *？還是你的目標是<span>有自己的轉變？

所以你.alltransition類看起來是這樣的 -

.alltransition{ 
    -webkit-transition:all .2s linear; 
    -moz-transition:all .2s linear; 
    -o-transition: all .2s linear; 
    transition: all .2s linear; 
} 

Fiddle

Fiddle - span color change