如何制作一次 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;
}

目前它只是变成了新颜色并保持原样。 我如何调整此代码以便满足我的要求？ 任何帮助表示赞赏！

编辑：

我正在使用：目标，这样当用户点击同一页面链接时，我链接到的文本部分会突出显示。 我希望文字淡出不同的颜色然后再变回来

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 年，但是有一个用于访问链接的“伪选择器” :visited

（它实际上是一个伪 class ）只需从那里修改你想要的属性。 不需要 animation 和转换。