css - 在没有 JavaScript 的情况下重新启动 CSS3 动画？

Question

有没有办法在不使用 JavaScript 的情况下单击时重新启动 CSS3 动画？

Answer 1

有一个css-trick总结了一些这样做的方法。您可以尝试:target伪类而不是复选框黑客。

编辑：使用伪:target类对示例进行了修改。

Answer 2

You could do it with the Checkbox Hack though it generally isn't encouraged.

Might be worth looking into however. It is an intriguing use of html and css.

EDIT

After a bit of play, I came up with this example. The hardest part is actually just resetting the animation without javascript, not registering the click event. To get around it I duplicated the animation to a second css rule that begins when the checkbox is hit.

There may be a better way to do it, but this would theoretically work, aside from being a bit unconventional :)