Detailed examples of the differences between transform, transition and animation properties in CSS3

The animation properties in CSS3 have recently been used in projects. Often easily confused. So I checked some information from the Internet and summarized it so that friends in need can refer to it and learn.

Transform
In some test cases, whenever the transform attribute is demonstrated, it seems to be animated. This makes a small number of people with intuitive thinking think that the transform attribute is an animation attribute. On the contrary, the transform attribute is a static attribute. Once written into the style, its effect will be displayed directly without any change process. The main purpose of transform is to make special deformations of elements, which is not unfamiliar to designers. Simply put, it is a CSS graphic deformation tool.

Regarding the origin setting among the basic conditions of graphic deformation, transform-origin is used to define it in CSS. The origin of this definition should be calculated from the upper left corner of the element affected by the css as 0,0. Other attributes are calculated based on this attribute.

Regarding the graphic change mode, transform-style is defined in the CSS3 standard. The default is flat, which displays a simple effect. And preserve-3d renders the space in 3D mode. From normal thinking, you should only need preserve-3d, but judging from the rumor that "GPU acceleration is used when preserve-3d is turned on", this attribute may be used to reduce system consumption. After all, 3d is better than 2d. It requires one more dimension of calculation.

If you need to use 3d mode, you must first specify the style as 3d, and add perspective and perspective-origin to any parent element to specify the perspective point.

There are five specific attributes used by designers to change element styles:

1. translate3d(x,y,z) is used to control the position of elements on the page. The position of the three axes;
2. rotate(deg) is used to control the rotation angle of the element;
3. skew[x,y](deg) This attribute is used to create the tilt. It has been done Designers may know that this is a necessary attribute when creating a 3D perspective in 2D;
4. scale3d (x, y, z) is used to enlarge and reduce the effect, and the attribute is the ratio;
5. matrix3d, css matrix. Through this matrix attribute, all the above attribute values ​​are covered, but I personally feel that the readability is extremely poor (it is all numbers and units, which is a bit blurry to memorize), and there is currently no reason to recommend its use.

Generally speaking, there is no difference between the properties of css transform and the originally used left, right, top, and bottom properties from a static and dynamic perspective. Therefore, transform should be classified into this type of positioning deformation when used. Inside the static properties.

Transition
The transition property is a simple animation property, very simple and easy to use. It can be said that it is a simplified version of animation, which is generally used for simple web page special effects. For example, you have the following two styles:

The code is as follows:

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

The transition attribute of animate means: when your left attribute changes, execute the animation effect (based solely on When the left attribute changes, other attributes will not be added to the animation change);

First of all, the css of your element is position. When you add animate to its cssList or replace position with animate, the attribute of the element changes and webkit-transition is triggered. The value before the specified attribute changes is the starting value, and the attribute after the change is the end value, and the animation effect is executed. This is a simple two-point change process, which greatly simplifies the complexity of the animation attribute.

At the same time, if there is a new change in the attribute value during the transition animation, the current animation execution will be interrupted, and the attribute value at the time of interruption will be provided to the new animation as the starting value to calculate the new animation. animation effect.

When writing CSS, because the only changing attribute is transform, the response attribute is specified as all in the transition attribute, which can respond to and execute the change animation of all attributes of the element (attributes that can be animated).

Animation
Introduced in the official Introduction, this attribute is an extension of the transition attribute. But this simple introduction contains something not simple: keyframes.

Anyone who has done Flash animation will know that there are two basic weapons in Flash: timeline and key frames. The emergence of css keyframes provides a collection of these two attributes in the flash world. Look at a simple example of keyframes:

The code is as follows:

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
 left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。关于动画工具，可以参考Web standards-based Animation Tools.

另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

The above is the detailed content of Detailed examples of the differences between transform, transition and animation properties in CSS3. For more information, please follow other related articles on the PHP Chinese website!