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

Question

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

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

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

#btn:active {
    background: red;
}

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

JsFiddle在这里

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:active
TAB

但是如果你需要用mouse click.... 激活它，并且在 a 中a tag你需要将焦点设置到对象上，所以javascript需要一些。（在这种情况下是内联的）

如果您可以使用另一个对象，input type="text"那么focus当您执行 时它会自动设置click，但在这种情况下focus它是由浏览器给出的操作。

因此，所需的内联 JS 是：

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

和 CSS3 代码

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

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