如何为“a”元素添加边框颜色动画？答案

【问题标题】：How to add border colour animations for `a` elements?如何为“a”元素添加边框颜色动画？
【发布时间】：2015-09-03 05:44:53
【问题描述】：

我正在设置一个包含边框的徽标，我使用了 a 元素，但边框动画不起作用，它们保持原样；我将如何使边框颜色在动画中发生变化？

动画与div 元素完美搭配

例子：

.anim {
  width: 20px;
  height: 20px;
  border: 10px solid #F44336;
  display: block;
  margin: 10px;
  -webkit-animation: borderanim 1s ease infinite;
          animation: borderanim 1s ease infinite;
}

@-webkit-keyframes borderanim {
  0% {
    border: 10px solid #F44336;
  }
  100% {
    border: 10px solid #2196F3;
  }
}

@keyframes borderanim {
  0% {
    border: 10px solid #F44336;
  }
  100% {
    border: 10px solid #2196F3;
  }
}

<div class="anim"></div>
<a class="anim" href="/"></a>
<br/>
<a class="anim" href="http://google.com/"></a>
<a class="anim" href="http://codepen.io/"></a>
<a class="anim" href="http://backpack.tf/"></a>
<a class="anim" href="javascript:location.href='http://codepen.io/';"></a>

【问题讨论】：

标签： css css-animations

【解决方案1】：

嘿，南极洲官方。

这是因为href 标签为空。它必须被填充或者根本没有href 属性。

我整理了一个 jsBin 来显示这种行为 here，当 href 属性为空时，动画不会运行，直到我在其中放置一个虚拟链接。

body {
  padding: 0;
  margin:  0;
}
* {
  box-sizing: border-box;
}
.anim {
  display: inline-block;
  border : 5px solid red;
  padding: 5px;
  animation: animateBorder 1s ease infinite;
}
@keyframes animateBorder {
  from {
    border: 5px solid red;
  }
  to   {
    border: 5px solid blue;
  }
}
@-webkit-keyframes animateBorder {
  from {
    border: 5px solid red;
  }
  to   {
    border: 5px solid blue;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <a class="anim" href="/link.com">I am an animated link.</a>
  <a class="anim" href="">I won't animate.</a>
</body>
</html>

希望能帮到你！

更新:: 经过进一步调查，目前所需的行为在 Chrome 中不起作用。它适用于火狐。我确实尝试使用伪元素来看看这是否可以实现，但似乎唯一的 Chrome 解决方法是将你的链接包装在一个 span 元素中并对其进行动画处理。

【讨论】：

谢谢，但是到外部网站的链接将不起作用<a class="anim" href="http://codepen.io/">I am meant to be an animated link.</a> 例如不会动画
哇，这确实是一些奇怪的行为。因为，例如http://google.com 工作正常。 .com 工作很酷，但 .io 发挥作用...
是的，我也链接到以 .tf 结尾的网站，他们也有同样的问题
一个 hacky 方式可能是 onclick = "window.location = 'http://codepen.io'; " 哈哈。当然不理想，但可能会奏效。
现在至少可以做 cx

【解决方案2】：

设置href 值似乎可以解决这种情况。

.anim {
  width: 20px;
  height: 20px;
  border: 10px solid #F44336;
  display: block;
  margin: 10px;
  -webkit-animation: borderanim 1s ease infinite;
          animation: borderanim 1s ease infinite;
}

@-webkit-keyframes borderanim {
  0% {
    border: 10px solid #F44336;
  }
  100% {
    border: 10px solid #2196F3;
  }
}

@keyframes borderanim {
  0% {
    border: 10px solid #F44336;
  }
  100% {
    border: 10px solid #2196F3;
  }
}

<div class="anim"></div>
<a class="anim" href="javascript:;"></a>

【讨论】：

但是如何链接到另一个网页？
您可以设置任何其他网页的链接。问题是href=""
仍有问题（参见 OP）
这真的很奇怪！正如上面所说，<a class="anim" href="javascript:location.href='http://codepen.io/';"></a> 现在可以解决...