Theory
Theory

Pre- and post-animation state: animation-fill-mode, step 1

In the previous examples, elements went back to the original state after being animated. However, there is a property that will define whether an animation effect will remain visible after the playback is over. It’s called animation-fill-mode. When the property is set to forwards, the element will keep its state after the animation is over.

Let’s see how this property works using an example: we will apply the same animation to two identical objects, then change the value of the animation-fill-mode property and see what happens.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Pre- and post-animation state: animation-fill-mode, step 1</title> <meta charset="utf-8"> <link rel="stylesheet" href="epoch3.css"> <link rel="stylesheet" href="style.css"> </head> <body class="scientific"> <div class="sign"></div> <div class="tube"> <span class="bubbles"></span> <span class="reagent"></span> </div> <div class="tube"> <span class="bubbles"></span> <span class="reagent experimental-reagent"></span> </div> </body> </html>

CSS

.bubbles { animation-name: blink; animation-duration: 2s; } @keyframes blink { 50% { opacity: 1; } } @keyframes reaction { 0% { background-color: #01ff70; } 100% { background-color: #ff4136; } }

Goalscompleted

Assign the reaction animation to both .reagent chemicals with a duration of 3s and a playback delay of 2s,
and then make the experimental chemical .experimental-reagent save its state after animation.