Shulou(Shulou.com)05/31 Report--

This article mainly introduces the css3 animation effect there is no deformation related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this css3 animation effect there is no deformation article will have a harvest, let's take a look at it.

Animations in css3 are deformed. You can use the "animation: animation attribute @ keyframes.. {.. {transform: morph attribute}}" to animate the deformation, the animation property is used to style the deformation, and the transform property is used to style the deformation.

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

Is there any distortion in css3 animation?

Css3 animation effects are deformed.

Morphing can take advantage of the transform attribute in css, and the transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

Animating can take advantage of the animation property, which is an abbreviated property that can be set:

Animation-name specifies the name of the keyframe that needs to be bound to the selector.

Animation-duration specifies the time it takes to complete the animation, in seconds or milliseconds.

Animation-timing-function specifies the speed curve of the animation.

Animation-delay specifies the delay before the animation starts.

Animation-iteration-count specifies how many times the animation should be played.

Animation-direction specifies whether the animation should be played in reverse in turn.

Examples are as follows:

Document .div1 {width:100px; height:100px; background:pink; margin:0 auto;animation:fadenum 5s;} @ keyframes fadenum {100% {transform:rotate (180deg) scale (0.5);}} this is a rotational scaling effect.

Output result:

This is the end of the article on "whether the css3 animation effect is out of shape". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "css3 animation effect has no deformation". If you want to learn more knowledge, you are 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.