如何使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

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