CSS Transitions: order of firing when multiple transitions - html

Question

demo
HTML
<span>text insie span</span> |||| text inside anchor
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?

Answer 1

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;
}
<span>text inside span</span> |||| text inside anchor