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

Today I will show you how to keep the animation from bouncing back in css3. The content of the article is good. Now I would like to share it with you. Friends who feel in need can understand it. I hope it will be helpful to you. Let's read it along with the editor's ideas.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to keep Animation from bouncing back with css3

In css, you need to take advantage of the animation-fill-mode attribute if you want to achieve animation without springback.

The animation-fill-mode property specifies whether the animation is visible before or after the animation is played.

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

The syntax is:

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

The possible values are:

Examples are as follows:

Document div {width:100px; height:100px; margin:0 auto; background-color:pink; animation:fadenum 5s; animation-fill-mode:forwards;} @ keyframes fadenum {100% {width:300px;}}

Output result:

Three ways of introducing css 1. Inline style, the most straightforward and simplest, uses style= "" directly for HTML tags. two。 The embedded style is to write the CSS code in between and use the

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. These are all the contents of how to make animation not rebound in css3. More content related to how to make animation not rebound in css3 can be searched for previous articles or browse the following articles to learn ha! I believe the editor will add more knowledge to you. I hope you can support it!

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.