The differences between transform, transition, and animate in CSS

Writing animations often use these properties, what is the difference between them?

1.transform

Each of the transform properties is shown as if it were a draw. This makes a small number of intuitive thinking people (including me) think that the Transform property is an animated property. On the contrary, the Transform property is a static property. It is actually just a static property that needs to be matched with transition and animation to show the animation effect. You can think of it as a left and top property, just a static style.

It allows elements to be offset, scaled, deformed, rotated, and so on.

Specific to the designer to change the element style with the following five properties: Translate3d (x, Y, z) is used to control the position of the element on the page of the three-axis position; rotate (deg) is used to control the angle of rotation of the element; Skew[x,y] (deg) This property is used to make the tilt, the design of the person may know, this is used to create a 3d perspective in the 2d when the necessary properties; Scale3d (x, Y, z) is used to zoom in and out, attributes are ratios; matrix3d,css matrices. With this matrix attribute, all of the above attribute values are covered, but the individual feels that the readability is very poor (all numbers and units, the back is a little blurry), there is no reason to recommend the use.

2.transition

Its properties are a simple animated property, very simple and very easy to use. It can be said that it is a simplified version of animation, is to do simple Web page effects for ordinary use.

. transform{        width:100px;        height:100px;        background:red;        transition:all 1s ease-out;    }    . transform:hover{        transform:rotate (360deg);    }

3.Animation

　　For a detailed explanation please see my other article: http://www.cnblogs.com/freefish12/p/5510210.html

. context{
width:100px;
height:100px;
Background:blue;
left:0;
Position:absolute;
}

@keyframes move{     from{        transform:rotatey (180deg);     }     to{         Transform:rotatey (360deg);     }    }    . context:hover{        0. 5s infinite Alternate;    } <div class= "Context" >        <div class= "Sub-context" ></div>   </div>         

The differences between transform, transition, and animate in CSS