CSS 颜色过渡在加载网站时触发多个动画

Question

这是我在这个论坛上的第一个问题，所以如果没有很好地解释，请随时向我询问更多详细信息。

我的导航栏上的所有链接都有一个颜色过渡，当您将鼠标悬停在它们上面时会触发该过渡。这很好用，问题是当网站加载时，所有这些元素都开始调整大小或移动到它们的初始位置。

CSS

nav{
    height: 80px;
    width: 100%;
    background-color: rgba(250,250,250,1);
    font-size: 13px;
    border-bottom: 1px solid #D8D8D8;
    color: #6E6E6E;
    position: fixed;
    margin-top: -80px;
}

nav a{
    padding: 20px 20px;
    line-height: 80px;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;   
}

nav a:hover{
    color:#00BFFF;
}

---

更新

我试图制作一个 JSFiddle 来解决这个问题，但即使 CSS 和 HTML 完全相同，它似乎也能正常工作 on the demo

我已将过渡属性从all 更改为color。这部分解决了问题，因为现在页面加载时元素不会移动，但现在的问题是所有包含此颜色过渡的链接在网站加载时显示初始蓝色(我的 CSS 中不存在)花费过渡时间更改为正确的颜色。此初始蓝色类似于已访问链接的标准颜色(但我也使用了选择器 a:visited 而没有得到肯定的结果。

这只发生在 Firefox 上。

由于我声望低不能发图，我取了蓝色的初始色调:RGB(6,6,231)

Answer 1

您只需要为颜色设置动画:

-webkit-transition: color 0.8s;
transition: color 0.8s;  

请注意，我仅将所有更改为颜色。

注意2你可以做

transition: color 0.8s, height 0.2s ease-out, opacity 1s linear 0.5s;