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

【问题标题】：How to make a CSS transition loop once?如何制作一次 CSS 过渡循环？
【发布时间】：2022-02-19 23:27:35
【问题描述】：

我正在尝试让一些文本褪色为一种新颜色，然后再变回原来的颜色。

#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 以便当用户单击同一页面链接时，我链接到的文本部分会突出显示。我希望文本褪色成不同的颜色，然后再变回来

【问题讨论】：

你对你目前拥有的东西有一个 jsfiddle 吗？

标签： html css

【解决方案1】：

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

要实现您正在寻找的结果，您可以使用动画来代替。

首先设置动画关键帧：

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

然后在你的元素上使用它：

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

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

这是fiddle as an example。

【讨论】：

不错的 stuart +1，但最好定义一些颜色或使用 inherit 而不是 auto
谢谢，我认为inherit 将使用父元素的颜色，而使用auto 允许您使用之前为元素设置的任何初始颜色。这个小提琴表明使用inherit“窃取”父母的颜色定义，而不是保持元素的原始颜色。 jsfiddle.net/qzEFL/1
非常感谢斯图尔特。只是出于兴趣，@keyframes 的支持程度如何？
NP，MDN 上的文献：developer.mozilla.org/en-US/docs/CSS/…，支持 FF、Chrome、Safari、Opera，从几个版本开始，IE 10

【解决方案2】：

你的意思是这样的吗？

Demo

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

span:hover {
    color: #aaa;
}

【讨论】：

感谢您的回复。我正在使用 :target 以便当用户单击同一页面链接时，页面的该部分会突出显示。我希望文本褪色成不同的颜色，然后再变回来

【解决方案3】：

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

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

【讨论】：