CSS 悬停时的边框动画

Question

所以我一直使用 JavaScript 制作动画，但我想尝试使用 CSS 制作更简单的动画。我完全按照 w3schools 上的指南操作，但似乎无法获得任何结果。

nav ul li {
  display: inline;
}

nav ul li a {
  margin: 0em 2em;
  text-decoration: none;
  color: #000;
}

nav ul li a:hover {
  animation: borderGrow 2s;
  -webkit-animation: borderGrow 2s;
}

@keyframes borderGrow {
  from { border-bottom: 0em solid #000; }
  to { border-bottom: 1em solid #000; }
}

@-webkit-keyframes borderGrow {
  from { border-bottom: 0em solid #000; }
  to { border-bottom: 1em solid #000; }
}

<nav>
  <ul>
    <li><a href="#">Link One</li>
    <li><a href="#">Link One</li>
    <li><a href="#">Link One</li>
  </ul>
</nav>

Answer 1

出于某种原因，当 border 属性未在原始元素本身上设置时（在动画之前），动画似乎不起作用。将 border 属性添加到原始元素似乎确实解决了它。

基于 MDN's list of animatable properties，似乎 border-color 和 border-width 是可动画的，而 border-style 不是，这可能是我们可以动画的原因必须将它添加到原始元素中。但是，默认情况下仅添加 border-style: solid 会在几乎所有浏览器（如果不是全部）中产生边框，因此最好同时指定 border-width: 0。

Note:

Behavior seems to be consistent in IE10, IE11 and Firefox. So it is more likely to be the expected behavior and not a bug.

I will update the answer with further details if and when I manage to find a clear and specific source explaining the reason for the behavior.

nav ul li {
  display: inline;
}
nav ul li a {
  margin: 0em 2em;
  text-decoration: none;
  color: #000;
  border-bottom: 0em solid #000;
}
nav ul li a:hover {
  -webkit-animation: borderGrow 2s;
  animation: borderGrow 2s;
}
@-webkit-keyframes borderGrow {
  from {
    border-bottom: 0em solid #000;
  }
  to {
    border-bottom: 1em solid #000;
  }
}
@keyframes borderGrow {
  from {
    border-bottom: 0em solid #000;
  }
  to {
    border-bottom: 1em solid #000;
  }
}

<nav>
  <ul>
    <li><a href="#">Link One</a>
    </li>
    <li><a href="#">Link One</a>
    </li>
    <li><a href="#">Link One</a>
    </li>
  </ul>
</nav>

或者，同样的效果也可以通过使用 transition 而不是 animation 来实现。对于 transition 在 hover 之前的元素上设置 border 的需要似乎完全是可选的。下面是一个示例片段。

nav ul li {
  display: inline;
}
nav ul li a {
  margin: 0em 2em;
  text-decoration: none;
  color: #000;
  border-bottom: 0em solid #000; /*optional for transition */
  -webkit-transition: border-bottom 1s;
  transition: border-bottom 1s;
}
nav ul li a:hover {
  border-bottom: 1em solid #000;
}

<nav>
  <ul>
    <li><a href="#">Link One</a>
    </li>
    <li><a href="#">Link One</a>
    </li>
    <li><a href="#">Link One</a>
    </li>
  </ul>
</nav>

Answer 2

问题一。您没有在 html 中完成 <a href="">...</a> 标签。下面这个右边的代码是....

<nav>
  <ul>
      <li><a href="#">Link One</a></li>
    <li><a href="#">Link One</a></li>
    <li><a href="#">Link One</a></li>
  </ul>
</nav>

问题2。您没有为 a 标签添加主边框值。只需将下面的 css 添加到 nav ul li a.

border-bottom:0em solid #000;

查看我在 jsfiddle

上的回答

Answer 3

现在我在 Safari/Webkit 浏览器上遇到同样的问题。当我在 css 动画关键帧上使用它时，边框属性不起作用。您必须先 set/declare css 文件上的边框属性才能工作。

示例：

    div.menu-menu-1-container ul li a, div.menu-menu-1-container ul.navbar-nav li.open ul.dropdown-menu li a,
.search-box .dropdown a i, .button-search
{
   border: 10px groove #ffd700; /* do not forget to declare the border property and value or it will not work; */
   animation: HHootteeLL 4s linear infinite;
   -webkit-animation: HHootteeLL 4s linear infinite;
    -moz-animation: HHootteeLL 4s linear infinite;
    -ms-animation: HHootteeLL 4s linear infinite;
    -o-animation: HHootteeLL 4s linear infinite;
}

CSS 悬停时的边框动画

CSS border animation on hover

css

border

css-animations