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

【问题标题】：CSS color transition triggers multiple animations when loading the websiteCSS颜色过渡在加载网站时触发多个动画
【发布时间】：2019-03-16 14:12:38
【问题描述】：

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

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

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)

【问题讨论】：

你能在 JSfiddle 上分享你的整个代码吗？
你的问题能再清楚一点吗？ “所有这些元素开始调整大小并移动到它们的初始位置”是什么意思？您确定它是由导航栏中的颜色转换引起的吗？即当你把它拿出来时，你不会观察到“所有这些元素都开始调整大小并移动到它们的初始位置”。

标签： css css-transitions

【解决方案1】：

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

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

请注意，我仅将 all 更改为 color。

注意2你可以做

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

【讨论】：

谢谢 Raul，在只制作颜色动画后，问题已经解决了一半。我将发布有关实际状态的问题的更新。
嘿，这个例子很好用。你能告诉我 1 件事：你在使用任何 CSS 框架吗？
是的，在示例中效果很好，很奇怪......我正在使用 Sublime Text 2。抱歉我的回答延迟，感谢您的帮助！
尝试在 fiddler 中重现问题，也许我们可以帮助您
@Alvarado87，你找到问题的解决方案了吗？

【解决方案2】：

尝试在 html 页面的页脚添加脚本标记。这对我有用。

<script> </script>

【讨论】：