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

Editor to share with you how to change the width of the css3 animation effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Methods: 1, use the "element {animation: name time}" statement to bind the element animation; 2, use the "@ keyframes name {100% {width: width value;}}" statement to set the element to change the width of the animation action to achieve the element to change the width of the animation effect.

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

In css, you can use the animation attribute and the @ keyframes rule to achieve the animation effect of changing the width of the element, and with the @ keyframes rule, you can create animation.

The principle of creating animation is to gradually change one set of CSS styles into another. You can change this CSS style many times during the animation process.

Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which is equivalent to 0 and 100%. 0% is the start time of the animation and the end time of 100% of the animation. For optimal browser support, you should always define 0% and 100% selectors.

Animate the action using the width property. This property is used to set the width of the element.

The syntax format of the animation attribute is as follows:

Animation: name duration timing-function delay iteration-count direction

Examples are as follows:

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

Output result:

These are all the contents of the article "how to change the width of css3 Animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.