在过渡完成之前，我的过渡的时间部分没有过去答案

【问题标题】：The time portion of my transition is not elapsing before the transition completes在过渡完成之前，我的过渡的时间部分没有过去
【发布时间】：2020-01-06 14:25:43
【问题描述】：

nav {
  background-color: black;
}
nav ul {
    grid-column: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
nav li {
    display: inline;
}
nav li a {
    color: white;
    font-family: Comic Sans MS;
    font-size: .9em;
    transition: all .5s ease-in-out; 
}
nav li a:hover {
    font-weight: 900;
    transition: all .5s ease-in-out; 
}

<nav>
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
    </nav>

所以我设置了transition: all .5s ease-in-out;（参见 0.5 秒），但是，当悬停在链接上时，它会直接进入悬停状态而没有过渡。怎么会？

【问题讨论】：

标签： html css hover css-transitions transition

【解决方案1】：

您需要为字体粗细（非悬停状态）建立一个初始值，并导入原始字体粗细和悬停时字体粗细之间的所有字体粗细。示例见https://codepen.io/madshensel/pen/ZOYwpy。

如果你使用基于网络的字体，你可以像这样导入它们：

@import url(<font-url-goes-here>:400,900,800,700,600,500,300,200,100);

然后在nav li a中添加font-weight: 400

【讨论】：

这需要导入任何你想使用的字体，但是很好的解决方案！ +1

【解决方案2】：

过渡本身没有问题，但字体粗细过渡确实存在问题。网上有一些帖子，但这里真的是great work around。

我已为您的 a:hover 课程添加了颜色更改，并删除了那里不必要的过渡。

nav {
  background-color: #333;
}
nav ul {
    grid-column: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
nav li {
    display: inline;
}
nav li a {
    color: white;
    font-family: Comic Sans MS;
    font-size: .9em;
    transition: all .5s ease-in-out; 
}
nav li a:hover {
    letter-spacing: 0.3px;
    font-weight: bold;
    color: #f33;
}

<nav>
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
    </nav>

如您所见，转换工作正常。目前（19 年 9 月 3 日）无法平滑过渡字体粗细。但是，有很多变通方法，我已经使用letter-spacing 更新了您的 sn-p。由于当权重变化时字体会变宽，您可以将其与 font-size 增加相结合以获得一些不错的效果。

【讨论】：