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

Editor to share with you the CSS3 deformation, transition, animation attributes of the example analysis, I believe that most people do not understand, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

There are several attributes of animation in css3: transform, transition, and animation in css3.

Explanation of deformation, transition and Animation attributes in CSS3

1. CSS3 deformation (transform)

Syntax:

1.1. Rotate rotate ()

Rotate (): specifies a 2D rotation (2D rotation) for the element through the specified angle parameter, which requires the definition of the transform-origin attribute (the default midpoint of rotation is the center point).

Transform-origin defines the base point of rotation, where angle refers to the selection angle, positive clockwise rotation and negative counterclockwise rotation.

Explanation of deformation, transition and Animation attributes in CSS3

1.2.Mobile translate (XQuery Y)

Transform (100pxMagol 20px)

Explanation of deformation, transition and Animation attributes in CSS3

Transform:translateX (100px):

Explanation of deformation, transition and Animation attributes in CSS3

Transform:translateY (20px)

1.3.Scaling scale (XQuery Y)

Scale ([,]): provides two parameters for performing [sx,sy] scaling vectors to specify a 2D scale (2D scaling). If the second parameter is not provided, it takes the same value as the first parameter. While Y is an optional parameter, if the Y value is not set, it means that the magnification of XPerry Y is the same in both directions, and X prevails. Such as: transform:scale (2pr 1.5)

Explanation of deformation, transition and Animation attributes in CSS3

1.4.oblique cut skew ()

Skew ([,]): skew transformation (oblique tangent transformation) on the X axis and Y axis. The first parameter corresponds to the X axis and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value is 0, which means there is no oblique cut in the Y-axis direction. Skew is used to twist elements. The first parameter is the horizontal twist angle, and the second parameter is the vertical twist angle. The second parameter is optional, and if the second parameter is not set, the Y axis is 0deg. Also based on the center of the element, we can also change the position of the base point of the element through transform-origin.

Transform:skew (30degjol 10deg)

Explanation of deformation, transition and Animation attributes in CSS3

Method: X axis: positive number is left, negative number is right; Y axis: positive number is lower, negative number is upper.

II. CSS3 transition (transition)

Explanation of deformation, transition and Animation attributes in CSS3

Detailed explanation of attributes

Transition-property

Not all attributes can transition, and only if the attribute has an intermediate point value can it have a transition effect. Transition-duration

Specifies the time it takes to transition from one property to another. The default value is 0, which means that the change is instantaneous and the transition effect is not visible.

Transiton-timing-function

There are several kinds of transition functions:

Explanation of deformation, transition and Animation attributes in CSS3

Trigger transition

Simple code does not trigger any transition operation, but needs to be triggered by user behavior (such as click, suspension, etc.). It can be triggered by: hoever: focus: checked media query trigger JavaScript trigger

Limitation

Transition has the advantage of being easy to use, but it has several major limitations.

CSS Animation is proposed to solve these problems.

3. CSS3 animation (Animation)

The animation attribute of CSS3 can be like Flash animation, by controlling keyframes to control every step of the animation to achieve more complex animation effects. The animation effect realized by ainimation is mainly composed of two parts:

1) declare an animation similar to the frame in the Flash animation; 2) invoke the animation of the Keyframe declaration in the animation property. **

Note: the animation attribute is supported by most browsers so far, but you need to add a browser prefix!

Animation Animation Properties

Or first list the table to explain the attributes, I feel it will be clearer:

Explanation of deformation, transition and Animation attributes in CSS3

(1) if animation-name:none is the default value, there will be no animation effects, and it can be used to override any animation. (2) animation-duration: the default value is 0, which means that the animation cycle is 0, that is, there are no animation effects. (3) animation-timing-function: same as transition-timing-function (4) animation-delay: time to wait when starting the animation (5) animation-iteration-count: define the number of times the animation is played, default is 1. If infinite, unlimited loop playback (6) animation-direction: default is nomal, each loop is played forward, (0100), another value is alternate, if the animation is played even times, play forward, if it is cardinality, play (7) animation-state: default is running, play, paused, pause (8) animation-fill-mode: define actions that occur before and after the start of the animation, default is none When the animation ends, it returns to the state it was when the animation did not begin. Forwards, after the end of the animation, continue to apply the position of the last Keyframe, that is, save in the end state; backwards, let the animation return to the state of the first frame; both: take turns applying forwards and backwards rules.

The animation animation effect of @ keyframesCSS3 mainly includes two parts: 1. Declare an animation with keyframes, 2. The animation declared by the Keyframe in the animation call.

@ keyframes is the Keyframe. This frame is similar to the frame in Flash, there can be many frames in an animation.

A style rule in @ keyframes is made up of multiple percentages, and you can create multiple percentages on this rule to achieve an ever-changing effect. In addition, @ keyframes must be prefixed with webkit. For example:

The 0% / 100% sign in the above code cannot be omitted, 0% can be replaced by from, and 100% can be replaced by to. For the changeColor animation to be effective, it must be called through the CSS3animation property.

Difference

The animation attribute is similar to transition, they all change the attribute value of the element over time, the main difference is that transition needs to trigger an event to change its CSS attribute over time; animation can also explicitly change the element CSS attribute over time without triggering any event, to achieve an animation effect.

These are all the contents of this article entitled "sample Analysis of deformation, transition and Animation attributes 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.