CODEWITHSUNDEEP
csscss-transitions
greener
greener

Reputation: 5069

Simultaneous CSS transition on link and its child span

I'm trying to have a css transition take place on a link upon hover. The text of the link should change color as well as a child span's color. It's happening except the span transition appears to start only when the first transition completed. Any ideas?

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

I tried separating the classes into two which made no difference.

EXAMPLE: JSFIDDLE

Upvotes: 1

Views: 338

Answers (2)

Guilherme Souza
Guilherme Souza

Reputation: 78

Just a fiddle as an example: JSFIDDLE

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

Upvotes: 1

Zenorbi
Zenorbi

Reputation: 2634

The transition will cause the color to change for its children, so they will begin the transition again and again. Try to not transition inside a transition with the same property. If you want the color of the span to change with the parent, use color: inherit; without transition on the span.

Upvotes: 2

Related Questions