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

This article mainly introduces css3 how to achieve zoom animation effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

In css, you can use the "@ keyframes" rule, animation, and transform attributes to achieve scaling animation, with the syntax of "element {animation: name time} @ keyframes name {100% {transform:scale (xjingy);}}".

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

How to realize the effect of scaling Animation by css3

In css, you can use the animation attribute and the @ keyframes rule to achieve the animation of element scaling, and through 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.

The transform attribute is also used to set the element scaling effect. The transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

Examples are as follows:

Cssimg {animation:fadenum 5s;} @ keyframes fadenum {100% {transform:scale (0.5);}}

Output result:

The above is all the contents of the article "how to achieve scaling Animation effects in css3". Thank you for reading! Hope to share the content to help you, more related 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.