2

I am trying to have an html element, say a <div>, temporarily be highlighted then fade out after jumping to that element on the webpage.

I am looking for an effect similar to this highlighting effect: What is your best programmer joke?

How would I go about implementing an effect like this?

I tried looking at the page source for that link, but I couldn't see how it was being done.

Community
  • 1
  • 1
cppprog
  • 804
  • 3
  • 12
  • 22

1 Answers1

4

This effect can be achieved with CSS alone.

You need to animate the background color of the element with the ID that matches the fragment identifier in the URL (i.e. everything after the #). You can match this in CSS by using the :target pseudo-element.

:target {
    -webkit-animation: target-fade 1s;
    -moz-animation: target-fade 1s;
    -o-animation: target-fade 1s;
    animation: target-fade 1s;
}


Here's a demo with the code you'll need.

JoeJ
  • 920
  • 1
  • 6
  • 17