Comment highlight css transition effect

Question

I'm trying to accomplish the effect of when linking to a target element on another page, the target is highlighted and then fades to the default page color, aka white.

A simple example of what I'm looking for is the same as when viewing a linked comment on Stack Overflow: CSS: highlighted text effect

When you first view the comment, it is highlighted a color then transitions to white.

I'm able to make it go from white to another color, but can't seem to do the reverse, and can't find any resources helping directly.

To go from white to red, I have:

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

html:

The link that takes you to the target:

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

The target being linked to:

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

I'd like to do the opposite of this (make it go from red->white).

Any help would be much appreciated, as like I said, I've been looking for a solution but they're just not quite helping.

Thanks!

Answer 1

This is close to the effect you described

: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>

Answer 2

Use the :target pseudo-class to run a highlight animation.

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

Clicking the link will change the URL's fragment identifier, so now the :target selector will point to the element with the matching id.

:target {
  border-radius: 3px;
  animation: highlight 1000ms ease-out;
}

@keyframes highlight {
  from {
    background-color: red;
  }
}

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

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