CSS3 New animation effects

CSS3 adds several properties to the animation effect, and by setting these properties, you can make some simple animations without having to use JavaScript. The properties of CSS3 animations are divided into three main categories: transform, Transition, and animation.

Transform
Rotate
Sets the angle at which elements are rotated clockwise, using:
Transform:rotate (x);
The parameter x must be the number of angles ending with deg or 0, which can be reversed for negative numbers.
Scale
To set the multiple of an element to zoom in or out, usage includes:
Transform:scale (a); Both the element x and the y direction are scaled a Times
Transform:scale (A, b); The element x is scaled by a times, and the y direction is scaled b
Transform:scalex (a); element x direction Scale a times, y direction unchanged
Transform:scaley (b); The element y is scaled B, and the x direction is unchanged.
Translate
To set the displacement of an element, use:
Transform:translate (A, b); element x Direction displacement A,y direction shift B
Transform:translatex (a); element x Direction displacement A,y direction unchanged
Transform:translatey (b); Element y-Direction displacement b,x direction unchanged
Skew
To set the angle of an element's tilt, usage includes:
Transform:skew (A, b); element x direction counterclockwise tilt angle a,y direction clockwise tilt Angle B
Transform:skewx (a); element x direction counterclockwise tilt angle a,y direction unchanged
Transform:skewy (b); Element y direction Clockwise tilt angle B, want direction unchanged
All of the above parameters must be the number of angles ending with deg or 0, which can be reversed for negative numbers.
Matrix
Sets the deformation matrix of the element because the matrix deformation is too complex to be temporary.
Origin
To set the hanging point of an element, usage includes:
Transform-origin:a b; The hanging point of the element is (a, B)
The hanging point of an element is the center point at which it rotates and tilts. A, B in the value can be a length value, a percentage ending in%, or a left, top, right, bottom four value.

Transition
Transition-property
Specifies the CSS property whose value is the CSS property name that the transition effect works on.
Transition-duration
The duration of the animation effect, whose value is the number of seconds ending in S.
Transition-timing-function
Specifies the rate of change function for the state of the element, based on the Bezier function, as shown in the details below:

Transition-delay
The time at which the animation effect defers execution and its value is the number of seconds ending in S.
The life cycle of the CSS3 animation is shown in which the relationship between duration and delay can be clearly seen:

Animation
The real animated properties in CSS3 are animation, whereas the front transform and transition are just transitions to the DOM element or state. In fact, the animated effect supported by CSS3 is just a fill animation, which means setting a few key states (key frame, keyframe) for the entire animation life cycle, and then animating and simulating transitions between keyframes. Then you must set the keyframe before setting the properties of the animation.
The syntax structure for Keyframe @keyframes is as follows:

@keyframesNAME {
a% {
/*CSS Properties */
}
b% {
/*CSS Properties */
}
...
}
The name denotes the animation, and a%, b% represents a percentage ending in percent, which sets the position of the keyframe in the animation life cycle, and the {} after the percentage is written as the value of the CSS property in that Keyframe state. In addition, if the same percentage value occurs more than once in @keyframes, then the next occurrence overrides the first occurrence, and the keyframe is unordered in @keyframes.
After setting the keyframe, you can continue to set the animation.

Animation-name
Specifies the name of the selected animation, that is, name in KeyFrames.
Animation-duration
With Transition-duration.
Animation-timing-function
With Transition-timing-function.
Animation-delay
With Transition-delay.
Animation-iteration-count
Sets the number of times the animation executes, which can be either a number or a infinite (loop execution).
Animation-direction
Sets the direction in which the animation executes, with the values either normal (normally played) or alternate (reverse playback).

CSS3 new animation effects