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。

注意：


IE10，IE11和Firefox中的行为似乎是一致的。所以它更可能是预期的行为而不是错误。

如果我找到一个明确且具体的来源解释行为的原因，我会更新答案并提供更多详细信息。

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，需要在border之前在元素上设置hover似乎是完全可选的。以下是一个示例代码段。

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

问题1。你没有在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动画关键帧上使用它时，border属性不起作用。您必须首先在css文件上设置/声明border属性才能工作。

示例：

    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边框动画

3 个答案: