The transfrom\transition of CSS

-ms-transform:rotate (7deg);                -ms on behalf of IE kernel Identification code
-moz-transform:rotate (7deg);             -moz on behalf of the Firefox kernel identification code
-webkit-transform:rotate (7deg);         -webkit on behalf of Google kernel identification code
-o-transform:rotate (7deg);               -O stands for open gate "opera" Kernel ID
Transform:rotate (7deg);                   Unified Identity Statement

Transform properties include: rotate ()/skew ()/scale ()/translate (,)

Transform:rotate ():

Meaning: Rotate.

Transform:skew ():

Meaning: inclined; skew (deg), i.e. italic;

Transform:scale ():

Meaning: proportion; 1 is enlarged, 0~1 is reduced.

Transform:translate (x, y):

Meaning: Change, displacement, x is positive upward displacement, y is moving downward, and left down is negative.

Transition Related:
Transfer from http://www.2cto.com/kf/201310/248505.html section:
Transition--transition In the description of the "CSS transition allow CSS property values in a certain

Smooth transitions within the   time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner.　　  "Since CSS3 's transition is so powerful, let's take a 1.1-point grasp of it." The transition transition in CSS3 has four central properties: Transition-property, Transition-duration, Transition-delay, and transition-timing-  function   transition-property--Specifies the style to be sporty   1, transition-property syntax [CSS]  transition-property:all (all property changes) | | [attr] (Specify the style you want to move) | | None (no property changes)    2, Transition-property property value (1) none:transition stop execution immediately (2) All: The element will perform the transition effect when any property value changes (3 attr: Specifies the style to move   Two, Transition-duration transition-duration is the duration of the specified element conversion process, in seconds (s). Transition-duration can be used for all elements, including: Before and:after  pseudo-elements. The default value is 0, which means that the transformation is instantaneous.   transition-delay--delay Time Transition-delay is used to specify the time at which an animation starts executing, that is, how long it takes to start the transition effect when the element attribute value is changed, in S (s)   , its use is extremely similar to transition-duration, and can also be used for all elements, including: Before and: after pseudo-elements. The default size is "0", that is, the transform executes,  immediately without delay.   Iv. transition-timing-function--Specifies the form of movement transition-timing-function:ease (gradually slows) | Linear (constant speed) | Ease-in (Acceleration) | Ease-out (deceleration) | Ease-in-out (accelerate and then subtract  Speed) | Cubic-bezier (this value allows you to customize a time curve) (number number>)   Five, transition [CSS]   element Selector { Transition: Motion style duration motion form delay time;}    Six, transition comprehensive compatibility of the wording   1, Mozilla kernel [css]  element selector {-moz-transition: Motion style duration motion form delay time;}     2, WebKit kernel [css]  element Selector {-webkit-transition: Motion style duration motion form delay time;}    3, opera kernel [css]  element selector {- O-transition: Motion style duration motion form delay time;}    4, the standard [css]  element Selector {transition: Motion style duration motion form delay time;}    Seven, transition Small instance CSS code: [CSS] &nb SP; #timings-demo {border:1px solid #ccc;p adding:10px;height:400px;width:400px;}  .box {width:100px;height:50px ; Line-height:50px;text-align:center;color: #fff; margin-bottom:10px;     -webkit-border-radius:5px;     -webkit-box-shadow:inset 0 0 5px Rgba (102, 153, 0,0.5);  }  /* gradually slow effect: */          #ease {background: #f36;     -webkit-transiti On:all 5s ease 0.3s; &nbSP;}  /* Acceleration Effect: */  #ease-in {background: #369;       -webkit-transition:all 3s ease-in 0.5s; &nbs P;}  /* Deceleration effect: */  #ease-out {background: #636;      -webkit-transition:all 5s ease-out 0s; &nbs P;}  /* acceleration and deceleration effect First: */  #ease-in-out {background: #3e6;     -webkit-transition:all 1s ease-in-out 2s ;  }  /* Uniform effect: */  #linear {background: #999;     -webkit-transition:all 6s linear 0s;    /* This value allows you to customize a time curve effect: */  #cubic-bezier {background: #6d6;     -webkit-transition:all 4s Cubic-bezier 1s;  }  /*hover State or clicking the click Button Creates a property change for box */  #timings-demo:hover. Box {    -webkit-transform : Rotate (360deg) scale (1.2);     -webkit-border-radius:25px;  }  

Transfrom\transition of CSS