CSS Target (pseudo-class) Animation


I’ve known about :target for a while and have always found it to be quiet useful, but I think with an added animation spin to it, it can be truly profitable 👍

The CSS pseudo-class, :target, styles an element that’s been referred through the page’s URL by its id (with a preceding hash symbol, #) present at the end of the URL.

Let’s say in a page there’s an element with id, “notes”, and we refer to it from the URL (like, example.com/index.html#notes), then a style can be applied to it at that time from CSS with #notes:target.

This sort of styling is preferred for navigations within a page, like from a subtitle-link in a Table of Contents to its corresponding subtitle on the same page.

For this, I’ve always used simple styles, well not always, but never thought of including animations before.

Animating the targeted element adds a nice little touch to the navigation.

<a href=#title1>नारंगी</a>
<a href=#title2>अमरूद</a>
<h1 id=title1>नारंगी </h1>
<h1 id=title2>अमरूद</h1>

animation: dropShadow 1.5s;
@keyframes dropShadow{
1px 1px #02b1fe,
2px 2px #02b1fe,
3px 3px #02b1fe,
4px 4px #02b1fe,
5px 5px #02b1fe;

Here’s the demo and here’s the full code.

The Author

Web developer and writer. @rpsthecoder in Twitter.