css - 在纯 CSS 中点击元素时触发动画

Question

假设我有一个简单的元素:

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

现在我可以通过 :active 改变这个元素的外观:

#btn:active {
    background: red;
}

然而，我想要的是，在我单击该元素后，该元素将保持红色大约一秒钟，而不更改 HTML(因此没有复选框 hack)或 javascript。有没有可以滥用的聪明技巧？

JsFiddle here

Answer 1

回答我自己的问题。通过滥用 :not 伪类，我们可以在点击发生后触发动画:

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

#btn:active {
    background: red;
}