CODEWITHSUNDEEP
csscss-animations
BenjiWiebe
BenjiWiebe

Reputation: 2245

Restart CSS3 animation without JavaScript?

Is there any way to restart a CSS3 animation when clicked without using JavaScript?

Upvotes: 3

Views: 355

Answers (2)

Bastian Rang
Bastian Rang

Reputation: 2187

there is a css-trick summarizing some methods of doing this. You can try the :target pseudo-class instead of the checkbox-hack.

Edit: Made a fiddle of the example using the :target pseudo-class.

Upvotes: 2

gotohales
gotohales

Reputation: 3695

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 :)

Upvotes: 1

Related Questions