Comment highlight css transition effect

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>

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>

Tags:

Javascript

Html

Css

Recent Posts