CSS Transitions: order of firing when multiple transitions

demo

HTML

<a href="#"><span>text insie span</span> |||| text inside anchor</a>

SASS

span {
  transition: all 500ms ease;
}

a {
  transition: all 5000ms ease;

  &:hover {
    color: red;
  }
}

When hover, first 5000ms transition is fired on <a> ignoring <span>.

After it finished, fires 500ms transition on <span>

Why it happens? Shouldn't they start simultaneously? Why <a> delays <span>'s transition by its own duration?

Since the span doesn't have a :hover rule of its own, the browsers handles this different.

Chrome simply picks up the anchor's, but in Firefox it actually runs the span's first and then the anchor's override it.

I can't say which one is correct here, as there is both a property inheritance involved and to not be able to animate the same property on an element with to different rules.

If you add a :hover rule to the span, you'll see it work as expected

Note, you need to hover the span or else nothing happens with its transition

Stack snippet

span { 
  color: pink;
  transition: all 500ms ease;
}
span:hover { 
  color: lime;
}

a {
  transition: all 500ms ease;
}
a:hover {
  color: red;
}

<a href="#"><span>text inside span</span> |||| text inside anchor</a>