Theory
Theory

Animation direction: animation-direction, step 1

In addition to the animation playback count, we can define the direction of element rotation using the animation-direction property. By default, animation has a normal direction.

However, you can reverse the animation direction to make it play backwards (that is, frame to is where the playback starts and frame from is where it ends). To do this, use reverse as the value of the animation-direction property.

Let’s compare two animation directions in an example.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Animation direction: animation-direction, step 1</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch2.css"> <link rel="stylesheet" href="style.css"> </head> <body class="mechanical"> <div class="mechanism"> <span class="gear-big"></span> <span class="gear-small"></span> </div> </body> </html>

CSS

@keyframes clockwise { to { transform: rotate(180deg); } } @keyframes counterclockwise { to { transform: rotate(-180deg); } }

Goalscompleted

Assign a clockwise animation to the large cogwheel .gear-big with a duration of 2s,
then assign an counterclockwise animation to the small cogwheel .gear-small with a duration of 2s,
then reverse the rotation of both cogwheels.