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;

Answer 2

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

<script> </script>

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

2 个答案: