Change background color of DIV after autoscroll

Question

I have a menu that links to different divs on a single page using hash tags after the page name (i.e. my-page.html#section1).

After the user scrolls to whatever section of the page they selected is there a way to briefly change the background color of that div?

The reason for this is that I want the user's eyes to immediately go to the section they selected. The reason this may not happen sometimes is that there will be 2 section within the screen space.

Thanks!

Sam

Answer 1

SOLUTION

Simply add this to your style sheet:

:target {
    -webkit-animation: target-fade 3s 1;
    -moz-animation: target-fade 3s 1;
}
@-webkit-keyframes target-fade {
    0% { background-color: rgba(228,201,128,.3); }
    100% { background-color: rgba(228,201,128,0); }
}
@-moz-keyframes target-fade {
    0% { background-color: rgba(228,201,128,.3); }
    100% { background-color: rgba(228,201,128,0); }
}