在纯CSS中单击元素时触发动画

Question

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

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

现在，我可以通过:active点击更改此元素的外观：

#btn:active {
    background: red;
}

然而，我想要的是，在我点击它之后，该元素将保持红色大约一秒钟而不改变HTML（因此没有复选框黑客）或javascript。是否有一个可以滥用的聪明技巧？

JsFiddle here

Answer 1

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

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

#btn:active {
    background: red;
}

Answer 2

您可以使用CSS3 animations并触发:focus＆amp; :active ...
现在，只需按 TAB 键即可激活效果...

但是如果你需要用鼠标点击来激活它......并且在a tag中你需要将焦点设置为对象，所以有些javascript是必须的。 （在这种情况下内联）

如果您可以使用其他对象，请说input type="text"，然后在执行focus时自动设置click，但在这种情况下，focus操作是<a href="#" id="btn" onclick="this.focus();return false">Click</a> 由浏览器提供。

因此，所需的内联JS是：

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

和CSS3代码

{{1}}

查看工作小提琴更新：http://jsfiddle.net/s3G7p/1/