Trigger animation on element click in pure CSS

Question

Let's say I have a simple element:

<a href="#" id="btn" onclick="return false">Click</a>

Now I can change the look of this element on click via :active:

#btn:active {
    background: red;
}

What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this?

JsFiddle here

Answer 1

Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}