注释突出显示CSS过渡效果

Question

我试图实现以下效果：链接到另一页上的目标元素时，目标将突出显示，然后淡出为默认的页面颜色，也就是白色。

我要查找的内容的一个简单示例与查看Stack Overflow上的链接注释时相同：CSS：突出显示的文字效果

第一次查看注释时，该注释突出显示为一种颜色，然后变为白色。

我能够使它从白色变为另一种颜色，但似乎不能做到相反，也找不到直接提供帮助的资源。

从白色变成红色，我有：

:target {
    border-radius: 3px;
    background-color: red;
    transition: background-color 1s linear;
}

的HTML：

将您带到目标的链接：

<div class="col-lg-12 title">Additional<a target="_blank" href="/insight#additional">(?)</a></div>

目标链接到：

<div class="col-lg-12 section-header" id="additional"><h3>Required</h3></div>

我想做相反的事情（从红色到白色）。

就像我说的那样，任何帮助将不胜感激，我一直在寻找解决方案，但他们只是帮不上忙。

谢谢！

Answer 1

这接近您所描述的效果

:target {
  border-radius: 3px;
  animation: highlight 1000ms ease-out;
}
@keyframes highlight {
  0% {
    background-color: red;
  }
  100 {
    background-color: white;
  }
}

<div class="col-lg-12 section-header" id="additional">
  <h3>Required</h3>
</div>

<a href="#additional"> Click me </a>