Trigger animation on element click in pure CSS

css, css-transitions

Solution

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;
}

Problem

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

Original source