时间戳

首页 > 解决方案 > 在过渡完成之前，我的过渡的时间部分没有过去

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

问题描述

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 秒），但是，当悬停在链接上时，它会直接进入悬停状态而没有过渡。怎么来的？

标签： htmlcsshovercss-transitionstransition

解决方案

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

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

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

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

推荐阅读