Comment highlight css transition effect

Question

I am trying to perform an effect when binding to a target element on another page, the target is highlighted and then disappears to the default page color, otherwise white.

A simple example of what I'm looking for is the same as when viewing a related comment in Stack Overflow: CSS: Highlighted Text Effect

When you first view a comment, it is highlighted in color and then goes white.

I can do this from white to a different color, but it seems that I cannot do the opposite and cannot find any resources that help directly.

To go from white to red, I have:

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

HTML:

Link that will lead you to the goal:

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

The goal is related to:

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

I would like to do the opposite of this (do it from red to white).

, , , .

!

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>

Hide result

Answer 2

CSS :

:target {
  border-radius: 3px;
  animation: highlight 500ms ease-out 2 alternate;
}
@keyframes highlight {
  100% {
    background-color: red;
  }
}

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

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

Hide result