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。

Answer 2

你的意思是这样吗？

Demo

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

span:hover {
    color: #aaa;
}

如何制作CSS过渡循环一次？

2 个答案: