Is there any way to restart a CSS3 animation when clicked without using JavaScript?
Is there any way to restart a CSS3 animation when clicked without using JavaScript?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there any way to restart a CSS3 animation when clicked without using JavaScript?
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 🙂