Theory
Theory

Stopping and starting an animation: animation-play-state

Yet another important property of CSS animations is called animation-play-state. It allows you to pause an animation and then resume playback from the same position.

The property can have two values: running and paused. As you can tell from the names, paused pauses an animation and running starts or resumes a previously paused animation. By default, the property’s value is running.

Let’s try creating an animation and controlling its playback.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Stopping and starting an animation: animation-play-state</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch4.css"> <link rel="stylesheet" href="style.css"> </head> <body class="technologic"> <div class="belt"> <span class="robot warrior"></span> </div> <div class="belt"> <span class="robot constructor"></span> </div> </body> </html>

CSS

.robot { animation-duration: 5s; animation-iteration-count: 2; animation-direction: alternate; }

Goalscompleted

Create a move animation with a keyframe to containing a left: 400px property,
then assign this animation to the robots .robot.
Create a .robot-paused rule that will pause the animation.

The robot-paused class is activated when the robots are clicked on. Try clicking on them while they are moving!