Trigger animation on element click in pure CSS

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

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

回答2:

You can use CSS3 animations and trigger with the :focus & :active...
Now, you can activate the effect with just pressing the TAB key...

But if you need to activate it with a mouse click.... and in a a tag you need to set the focus to the object, so some javascript is required. (inline in this case)

If you can use another object, let say an input type="text" then the focus it's automaticly set when you do the click, but in this case the focus action it's given by the browser.

So, the inline JS required is:

<a href="#" id="btn" onclick="this.focus();return false">Click</a>

And the CSS3 code

#btn {
    background: yellow;
}

#btn:focus, #btn:active {
    -webkit-animation: btn-color 1s forwards linear;
    -moz-animation: btn-color 1s forwards linear;
    -ms-animation: btn-color 1s forwards linear;
    -o-animation: btn-color 1s forwards linear;
    animation: btn-color 1s forwards linear;
}

@-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }