Transition and transform in the CSS3

I've always had him in the wrong, or confused. Now you can summarize it a little.

Transition: A style that handles animations in CSS3, involving only the start and end of the animation in two states. If it involves the various times or states of an animation, it is necessary to use another style:

Animate.

Transition has four transition properties:

Transition-property    /* Specifies the style changes that the animation performs */ transition-duration    /* the time the animation needs to be executed */  / * smooth transition function:*/  transition-delay/*  How long does the delay start animation * /　

It is transition-property and transition-timing-function that need attention .

TRANSITION-PROPERTY Specifies the style change, which requires the Transform property if it involves the rotation, deformation, reduction/enlargement of the element:

Transform:scale (Sx,sy); Transform:rotate (a); Transform:skew (Ax,ay); Transform:matrix (a,b,c,d,e,f)

Where Martix is more complex, it can contain rotation, deformation, reduction/amplification of the three, in fact, the principle of transform is in computer graphics 2D matrix transformation.

Reference: Http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html.

Transition-timing-function need to use Bezier curves, first you need to know a few simple constants: Linear ease ease-in ease-out ease-in-out.

Further refinement requires knowing what a Bezier curve is. can refer to:

Http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3%E5 %8a%a8%e7%94%bb-svg-canvas/

Good luck!

Transition and transform in the CSS3