链接及其子跨度上的同时CSS转换

Question

我正试图在悬停时在链接上进行css转换。链接的文本应该更改颜色以及子跨度的颜色。它正在发生，只是跨度转换似乎只有在第一个转换完成时才开始。有什么想法吗？

<div class="transition">
    <a href="#">
       Click here
       <span class="glyphicon glyphicon-play pull-right"></span>
    </a>
</div>
.transition a,
.transition span        {
  -webkit-transition:color .2s linear;
  -moz-transition: color .2s linear;
  -o-transition: color .2s linear;
  transition: color .2s linear;
}

我试着把这两个班分成两个，但没有什么区别。

示例：JSFIDDLE

Answer 1

转换将导致其子项的颜色发生变化，因此它们将一次又一次地开始转换。尽量不要在具有相同属性的转换中进行转换。如果希望跨距的颜色随父项而更改，请在跨距上使用不带过渡的color: inherit;。

Answer 2

仅以小提琴为例：JSFIDDLE

.transition a       {
-webkit-transition:color .2s linear;
-moz-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
}