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;
}

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

这里以小提琴为例。

Answer 2

你的意思是这样的吗？

演示

span {
    color: #000;
    transition: color 1s;
    /* Not using proprietary codes here, you can add it if you need */
}

span:hover {
    color: #aaa;
}

Answer 3

晚了 8 年，但访问的链接有一个“ psudo-selector ”：:visited

（它实际上是一个伪类）只需从那里修改你想要的属性。不需要动画和过渡。