What are the four related properties of css3 animation?

css3 sets four related attributes for animation: 1. Transform attribute, used to apply 2D or 3D transformation to elements; 2. Transition attribute, used to achieve transition effects; 3. Animation attribute, used to give elements Bind animation; 4. "@keyframes" defines the behavior of a cycle of animation.

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

Generally speaking, there are only three properties of CSS3 animation: transform, transition, and animation.

transformproperty applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.

transitionThe property is a shorthand property for setting four transition properties:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

animationThe property is a shorthand property for setting six animation properties:

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

• animation-direction

@keyframesRules

css video tutorial）

The above is the detailed content of What are the four related properties of css3 animation?. For more information, please follow other related articles on the PHP Chinese website!