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

This article mainly shows you "css3 how to achieve left and right telescopic animation effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "css3 how to achieve left and right scalable animation effect" this article.

Methods: 1, use the "element {animation: name time}" statement to bind the element to the animation; 2, use the "@ keyframes name {50% {transform:scale (left and right expansion multiple, 1);}" statement to set the animation action of the element expansion to achieve the element left and right stretch animation effect.

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

In css, to achieve left and right scaling animation, you need to bind the animation to the picture element through the animation attribute and specify the animation time.

Then use the keyframes rules to specify the action of the element animation, the specific action according to the transform attribute with the scale function to scale the element.

Examples are as follows:

Document div {width:100px; height:100px; margin:0 auto; background-color:pink; animation:fadenum 5s;} @ keyframes fadenum {50% {transform:scale (3 transform:scale);}}

Output result:

The above is all the content of this article "how to achieve left and right scalable animation effects in css3". 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.