Transition of color affecting top‽ [duplicate] - html

Question

This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
CSS transition shorthand with multiple properties?
(7 answers)
Closed 4 years ago.
I'm using Firefox 52.9.0.
I'm trying to add a skip navigation link to a page. Currently, page looks like this:
/* Accessibility */
/* Hide the skip to main content link unless it has focus */
body > a:first-child {
background: inherit;
position: fixed;
left: 0px;
top: -1em;
transition: top 2s ease-out;
}
body > a::first-child:not(:focus) {
}
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in;
}
skip to main content
<main id="lorem">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum... can't remember the rest, sorry.</p>
<p>This CSS is mostly fine.</p>
</main>
(Click on the page and press Tab to see the effect.)
This looks fine, except the descender and underline are visible. In order to deal with this, I told the browser to change the text colour to transparent when it didn't have focus:
/* Accessibility */
/* Hide the skip to main content link unless it has focus */
body > a:first-child {
background: inherit;
position: fixed;
left: 0px;
top: -1em;
transition: top 2s ease-out;
transition: color 2s ease-out;
}
body > a:first-child:not(:focus) {
color: darkgoldenrod;
}
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in;
transition: color 0.1s linear;
}
skip to main content
<main id="lorem">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum... can't remember the rest, sorry.</p>
<p>This CSS behaves strangely.</p>
</main>
(transparent is substituted for darkgoldenrod so it's easier to see the effect.)
The color transition works, but for some reason it's stopped the top transition from working!
Why is this, and how can I fix it?

Answer 1

Your second transition declaration erases, not adds to, the first one. This is the cascade at work.
You can't declare separate transitions additively using multiple transition declarations; you will need to group them into a single declaration like so:
body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in, color 0.1s linear;
}