Restart CSS3 animation without JavaScript?

Question

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

@JanDvorak That was quick, but not the answer I was hoping for! ;) I didn't think so, either, but I thought maybe someone else knew of some way to do it. — BenjiWiebe
– BenjiWiebe, Commented Jan 9, 2013 at 21:18
I can upvote; luckily there will come a person to prove this impossible ;-) — John Dvorak
– John Dvorak, Commented Jan 9, 2013 at 21:22
do you have a fiddle for an example HTML+CSS3 Animation to see what you have? — Bastian Rang
– Bastian Rang, Commented Jan 9, 2013 at 21:29
@BastianRang I'm messing around in the Tryit Editor on w3schools.com. This w3schools.com/css3/tryit.asp?filename=trycss3_animation3 is the animation I am using. — BenjiWiebe
– BenjiWiebe, Commented Jan 9, 2013 at 21:36

Bastian Rang · Accepted Answer · 2013-01-09 21:51:07Z

2

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.

answered Jan 9, 2013 at 21:51

Bastian Rang

2,1971 gold badge19 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BenjiWiebe Over a year ago

OK, so what makes the animation restart?

Bastian Rang Over a year ago

you need two separate animations, looking identical. you bind one to the default div and one to div:target. A link to your div-id does the rest.

gotohales Over a year ago

Nice! Hadn't thought of that approach.

gotohales · Accepted Answer · 2013-01-09 21:48:47Z

1

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

edited Jan 9, 2013 at 21:48

answered Jan 9, 2013 at 21:23

gotohales

3,7151 gold badge23 silver badges34 bronze badges

2 Comments

gotohales Over a year ago

@BenjiWiebe Added an example of it working, so it is for sure possible, though probably not widely supported and so on and so forth.

BenjiWiebe Over a year ago

Thanks for that example. I played with it and tried setting the opacity of the checkbox to zero and I changed the text from "Do Something" to "Play", and I had what I wanted. Thanks again for that example!!

Collectives™ on Stack Overflow

Restart CSS3 animation without JavaScript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related