html - 如何使 CSS 过渡循环一次？

Question

我正在尝试让一些文本淡化为一种新颜色，然后再恢复为原来的颜色。

#sidebar2:target .phonenumber { 
    -o-transition:0.7s;
    -ms-transition:0.7s;
    -moz-transition:0.7s;
    -webkit-transition:0.7s;
    transition:0.7s;
    color: yellow;
}

目前它只是变成新颜色并保持原样。我如何调整此代码以便满足我的要求？感谢您的帮助!

编辑:

我正在使用 :target 以便当用户单击同一页面链接时，我链接到的文本部分会突出显示。我希望文本淡出不同的颜色，然后再淡出

Answer 1

我相当确定循环转换是不可能的，您可以从一种状态转换到另一种状态，但不能在一次转换中再次返回。

要实现您正在寻找的结果，您可以改用动画。

首先设置动画关键帧:

@keyframes glowyellow {
  0% { color: auto; }
  50% { color: yellow; }
  100% { color: auto; }
}

然后在您的元素上使用它:

#sidebar2:target .phonenumber {
  animation: glowyellow 1.4s linear;
}

使用供应商前缀来支持浏览器，就像您在示例中所做的那样。

这是一个fiddle as an example .