Does css3 animation have an execution order?

css3 animation has an execution order. The animation execution order in CSS starts from the outermost attribute set by transform, and the syntax is "transform: the last executed action attribute (attribute value)...the first executed action attribute (attribute value);". When there is an offset action and then a rotation action in the animation, the rotation will be based on the original center point, so you need to deform first and then offset when doing animation.

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

Does css3 animation have an execution order?

css3 animation has an execution order

The execution order of transform animation starts from the outermost attribute. For example: transform:translateX(100px) rotate(30deg), the animation will first rotate 30 degrees and then offset by 100 pixels.

If you switch it over, transform:rotate(30deg) translateX(100px), the animation will be offset by 100 pixels first, and then rotated by 30 degrees. Note here that if you offset first and then rotate, the animation will be based on the original The center point rotation of the position

example is as follows:

So when doing animation, first Do other deformations, then offset.

(Learning video sharing: css video tutorial, html video tutorial)

The above is the detailed content of Does css3 animation have an execution order?. For more information, please follow other related articles on the PHP Chinese website!