影响顶部的颜色过渡‽

Question

我正在使用Firefox 52.9.0。

我正在尝试向页面添加跳过导航链接。目前，页面如下所示：

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

<a href="#lorem">skip to main content</a>
<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>

(单击页面并按Tab键查看效果。

这看起来不错，除了下降线和下划线可见。为了解决这个问题，我告诉浏览器在没有焦点时将文本颜色更改为transparent：

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

<a href="#lorem">skip to main content</a>
<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代替darkgoldenrod因此更容易看到效果。

color转换有效，但由于某种原因，它阻止了top转换的工作！

为什么会这样，我该如何解决？

Answer 1

您的第二个transition声明会擦除而不是添加到第一个声明中。这是工作中的级联。

您不能使用多个transition声明以加法方式声明单独的转换;您需要将它们分组到单个声明中，如下所示：

body > a:first-child:focus {
top: 0px;
transition: top 0.1s ease-in, color 0.1s linear;
}