


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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics





How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

When Microsoft launched Windows 11, it brought a lot of changes. One of the changes is an increase in the number of user interface animations. Some users want to change the way things appear, and they have to find a way to do it. Having animations makes it feel better and more user-friendly. Animation uses visual effects to make the computer look more attractive and responsive. Some of them include sliding menus after a few seconds or minutes. There are many animations on your computer that can affect PC performance, slow it down, and interfere with your work. In this case you have to turn off animation. This article will introduce several ways that users can improve the speed of their animations on PC. You can apply the changes using Registry Editor or a custom file you run. How to improve animations in Windows 11

How to preserve hover state? The following article will introduce to you how to retain the hover state without using JavaScript. I hope it will be helpful to you!

How to use CSS to implement rotating background image animation effects of elements. Background image animation effects can increase the visual appeal and user experience of web pages. This article will introduce how to use CSS to achieve the rotating background animation effect of elements, and provide specific code examples. First, we need to prepare a background image, which can be any picture you like, such as a picture of the sun or an electric fan. Save the image and name it "bg.png". Next, create an HTML file and add a div element in the file, setting it to

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".

Implementation method: 1. Use the ":active" selector to select the state of the mouse click on the picture; 2. Use the transform attribute and scale() function to achieve the picture magnification effect, the syntax "img:active {transform: scale(x-axis magnification, y Axis magnification);}".
