Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use the animation-fill-mode attribute in css. I hope you will get something after reading this article. Let's discuss it together.

Note: the attribute values are one or more fill pattern keywords separated by commas.

Grammar.

Animation-fill-mode:none | forwards | backwards | both

Value

Description

None

Do not change the default behavior.

Forwards

When the animation is complete, the last attribute value is maintained (defined in the last Keyframe).

Backwards

The start attribute value (defined in the first Keyframe) is applied for a period of time specified by animation-delay before the animation is displayed.

Both

Both forward and backward fill modes are applied.

Case study

Specify the fill mode for the H2 element:

Div

{

Width:100px

Height:100px

Background:red

Animation:myfirst5s

Animation-fill-mode:forwards

-moz-animation:myfirst5s;/*Firefox*/

-webkit-animation:myfirst5s;/*SafariandChrome*/

-omuranimationbank myfirst5s leading opera /

}

@ keyframesmyfirst

{

From {background:red;}

To {background:yellow;}

}

@-moz-keyframesmyfirst/*Firefox*/

{

From {background:red;}

To {background:yellow;}

After reading this article, I believe you have a certain understanding of "how to use animation-fill-mode attributes in css". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.