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.

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>