Animation

Animation with No User Interaction

When the page is loaded, the car moves off the screen by itself.

---

User Interaction with “Active” Pseudoclass

Click and hold the mouse on the car to make it move off the screen. The animation was set to “animation-play-state: paused;” and the “:active” pseudoclass was used to set the play state to “running.”

---

User Interaction with JavaScript Button

The car drives off the page when the green button is clicked. The button has an attached JavaScript program that sets the animation play state to “running.” The JavaScript statement reads, onClick="document.getElementById('car3').style.animationPlayState='running';".
Note that no # is required for the ID and use of nested single quotes to avoid confusion.

Go!