Как создать два перехода CSS параллельно на вложенных элементах

Question

Попытка создать простую связь с бутстрап-глификоном. При наведении указателя background-color из a изменяется, а также шрифт 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