Use Animation Fill Mode to Retain Keyframe Styling

Instructor: [0:00] One thing we might want to do is animate the result-in. When the result is shown, it instantly appears. Let's set an animation on the result, and let's call it fly-in, and we'll give it a duration of one second. It will ease in. Let's define our keyframes for fly-in below.

[0:15] We're going to say our result animates from, transform, translate, minus 50 percent, 250 percent, and scale . It will also start within a passive .

[0:28] Let's try that out with our board. We can see that our result animates in and we only needed to define the frontend of our animation. We can also change from to zero percent.

[0:39] We might choose to alter the timing on our animation, and let's say that we only want the result to animate in once the final page has been drawn. Let's try that again. Now, we have the pieces, and when we animate, we get a flicker, and then animates in.

[0:56] If we use the animations inspector in DevTools, we can see what's happening. Here, the final piece is being drawn. Our result is shown over the top instantly, because it has an animation delay. Once the piece is drawn, the animation for fly-ins starts, and we can see that our element starts flying in from the bottom.

[1:13] To fix that, we can apply an animation-fill-mode. In this case, we can apply the animation-fill-mode:backwards. What this means is our element will retain the styles applied in the first frames of our keyframes during the delay period.

[1:26] If we try our demo again, and we run the board, that time it didn't flicker. If we check the animations inspector in DevTools, we can actually see that the green line for fly-in is now solid, whereas previously it was dashed. If we scrub through the animation, it's not appearing. Then, it flies in.

[1:44] In review, we can use animation-fill-mode with accepted values of none, both, forwards, and backwards to retain styling from our keyframes when our elements aren't animating.

[1:54] In this example, we used backwards, because our animation has a delay, and we're using a from animation. By that, we mean an animation that defines an opening state but doesn't define an end state. It animates to its defined styles.