Understanding the CSS animation-fill-mode Property

Core points

• CSS animation-fill-mode attribute controls how the style is applied before and after execution of the animation. It has four possible values: none, forwards, backwards, both, and
.
• forwards
Values ​​ensure that after the animation is finished, the style defined in the last keyframe of the animation remains on the element instead of being restored to the original style.
• backwards
Value applies the style of the first keyframe to the element during any delay before the animation begins.
• The bothforwards value combines the effects of backwards and
, applying the style of the first keyframe before the animation starts, and retaining the style of the last keyframe after the animation ends.

Almost all front-end developers have used CSS keyframe-based animations. Some people may even create some rather complex demonstrations and experiments with this feature.

animation-fill-modeIf you need a full introduction to the topic, my post on Smashing Magazine in 2011 is still a good choice. However, in this article, I want to focus on one component of the CSS animation specification: the

attribute.

animation-nameThis is the only animation-based property that is not easy to understand. For example, no one will be confused about animation-duration,

, etc... But what exactly does "fill mode" mean? Let's think about it briefly and give some examples.

fill-mode grammar

@keyframes You may already know that basic keyframe animations are defined using the

rule. However, unless you associate the keyframe with the animation name, the keyframe won't work. This is an abbreviated animation attribute declaration, you can understand what I mean:

<code class="language-css">.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;
}</code>

Of course, the abbreviation of this same line can be expanded to:

<code class="language-css">.example {
  animation-name: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}</code>

animation-fill-modeIn both examples, the forwards attribute is defined last, and in both cases the value is set to "

". We don't have to define it at the end, but this may be a good practice.

animation-fill-mode Similarly, even if you have never used CSS animations, you may be able to figure out what everything in the above statement does-except

.

The normative definition of fill-mode

So how does the specification say about this attribute?

The

attribute defines which values ​​are applied outside the animation execution time. animation-fill-mode

As it continues to explain, the time "outside execution time" specifically refers to the time between the time the animation is applied to an element and the time when the element actually starts to an animation. Basically, using the fill-mode value, you can define how the animation element looks outside the animation execution time but after the animation is applied. It may sound confusing, but you will soon understand what I mean.

Let's expand this basic definition by looking at each possible value (which may still be a bit confusing).

Decomposition value

The

animation-fill-mode attribute can accept one of four values: none, forwards, backwards, or both. Here is a breakdown of each value.

Value: none

This is the initial or default value of animation-fill-mode. Defining the none value will be redundant unless you set it through JavaScript to change it from other values, or you are overwriting something in the cascading.

To understand what the none value does, here is a CodePen demonstration showing an animation without animation-fill-mode (so its value is none):

[CodePen demo link (please replace it with the actual link)]

You can see that in most cases the fill mode of none is not what you want. Remember that fill-mode defines how an element looks outside the animation execution time.

In this example, the ball is initially red and then gradually turns pink while moving to the right and changing size at the same time. It would be better if the ball remains small, pink and right after the animation is over. This will prevent the ugly jump back to the starting state after the animation is over.

Value: forwards

Let's change the animation of the ball to fill-mode value is "forwards":

[CodePen demo link (please replace it with the actual link)]

Now you can see the benefits of using animation-fill-mode and why the forwards value is used more than any other value. When we define it with this value, we tell the browser that we want the animation element to retain its final style set, as defined in the last keyframe. This way, we don't jump back to the initial state before the element starts animation after the animation is over (the "Reset" button I added in the demo can do this for us).

Value: backwards

Let's change the value to backwards—What happens now?

[CodePen demo link (please replace it with the actual link)]

Note that the behavior in this demo is exactly the same as the first demo with a animation-fill-mode value of "none". Why is this happening?

Contrary to forwards, the backwards value gives the element its style before the animation begins after the animation ends. This makes more sense when we see the specification's description of the value of backwards:

During the period defined by animation-delay, the animation will apply the attribute value defined in the keyframe where the first iteration of the animation will be initiated. These are the values ​​of the from keyframe... or the values ​​of the to keyframe.

To demonstrate this, I made two modifications to the demonstration:

• Added a from keyframe to use different colors for the ball.
• Add delays were added using the animation-delay attribute.

It's here:

[CodePen demo link (please replace it with the actual link)]

Now you can see that once you press the "Start Animation" button, the ball will turn blue. This is because of the obvious delay. Technically, each animation has a default delay, but the delay is 0s, so in this case you won't really see the value of backwards if your style in the initial keyframe is versus before the animation starts The style is the same, and you certainly won't see it either. If using the same style and the same delay, deleting the backwards value causes the ball to remain red before the animation starts.

To be honest, I didn't really see many practical uses of the backwards value. It is hard to imagine that in too many cases the style in the first keyframe of an animation is different from the static state before the element animation. But if you have any ideas, I'd love to listen to some use cases.

Value: both

The last value we are going to view is the both value. This value tells the browser to apply the effect of forwards and backwards.

Let's keep the same style in the demo and see what happens when we assign it to the both value:

[CodePen demo link (please replace it with the actual link)]

Not Rocket Science. As you can see, during the initial delay, the initial keyframe style is applied, and the animation ends and the style in the last keyframe is frozen (as mentioned earlier, this is usually what you want). Again, this value would not be much different from using forwards if it weren't for the delay and the alternative colors defined in the first keyframe.

Some precautions and tips

Based on the above content and some details in the specification, the following are some things to note:

• Although I have somewhat minimized the importance of the backwards and both values, these values ​​may come in handy in complex animations controlled by scripts or user input. Use cases will abound (think: games), but only through experimentation and innovation.
• When the animation-direction property is set to reverse, the effects of the forwards and backwards values ​​are reversed. If you fiddled with the demo, you'll see how it works.
• While I said animation-fill-mode only accepts four values, remember that you can also use CSS range attribute values.
• In earlier versions of the specification, animation-fill-mode was not part of the abbreviation animation properties, but it seems that all browsers that support keyframes can use it for abbreviation.
• When using animation abbreviation and selecting a custom name for the animation, do not use names that match the valid fill-mode value (such as "reverse" or "forwards"), otherwise the browser will parse the abbreviation declaration, assuming The name is actually a fill-mode value.

Conclusion

I hope this summary will help you understand this property better. Some research has really helped me understand it better. If you have done something unique about animation-fill-mode, or have any unique use cases for different values, or have any corrections to this article, please let us know in the discussion.

FAQs about CSS animation fill mode properties

CSS animation-fill-mode What is the meaning of attributes?

CSS animation-fill-mode Properties are key aspects of CSS animation. It defines how an animation applies styles to its target before and after execution. This property helps control the intermediate state of elements during animation. It can take four values: none, forwards, backwards, and both. Each value determines how the animation affects the elements at different stages, thus giving developers greater control over the animation.

How does the

value in animation-fill-modeforwards work?

The

CSS animation-fill-mode value in the attribute ensures that the element retains the calculated value set for the last keyframe encountered during the animation process. This means that after the animation is over, the style defined in the last keyframe will remain on the element instead of being restored to the original style. forwards

Can you explain the value of

in animation-fill-mode? backwards

CSS

Value in the animation-fill-mode property applies the style of the first keyframe to the element during the period before the animation begins. This means that if there is a delay before the animation starts, the element will take the style defined in the first keyframe during that delay. backwardsWhat does the value of

in animation-fill-modeboth mean?

The

value in the animation-fill-mode CSS both attribute combines the effects of forwards and backwards. This means applying the style of the first keyframe before the animation starts, and retaining the style of the last keyframe after the animation ends.

What happens when the animation-fill-mode property is set to none?

When the CSS animation-fill-mode property is set to none, the animation does not apply any style to the element before or after it begins. Elements are affected only by animation during active operation of the animation.

Can I use multiple values ​​for the animation-fill-mode attribute?

No, CSS animation-fill-mode attribute can only take one value at a time. You can select from none, forwards, backwards or both according to the specific requirements of the animation.

All browsers support animation-fill-mode attributes?

CSS animation-fill-mode Properties are widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported in Internet Explorer.

animation-fill-mode How do attributes interact with animation-delay attributes?

CSS animation-fill-mode Properties work with animation-delay Properties. If animation-fill-mode is set to backwards or both and animation-delay is present, the style of the first keyframe is applied during the delay.

animation-fill-mode Can attributes be used with keyframes with percentage values?

Yes, the CSS animation-fill-mode attribute can be used with keyframes with percentage values. The forwards and backwards values ​​will apply the style of the closest 0% and 100% of the keyframes, respectively.

animation-fill-mode What is the default value of the attribute?

The default value of the

CSS animation-fill-mode attribute is none. This means that by default, the animation does not apply any style to the element before or after it starts.

Please note that I have replaced the CodePen link with a placeholder. You need to provide an actual CodePen demo link to make the article complete.

The above is the detailed content of Understanding the CSS animation-fill-mode Property. For more information, please follow other related articles on the PHP Chinese website!