transition: 允許CSS屬性值在一定的時間區(qū)間內(nèi)平滑的過渡，
需要事件的觸發(fā)，例如單擊、獲取焦點(diǎn)、失去焦點(diǎn)等
transition:property duration timing-function delay;
property:CSS的屬性，例如：width height 為none時停止所有的運(yùn)動，可以為transform

               duration:持續(xù)時間
               timing-function:ease等
               delay:延遲
               注意：當(dāng)property為all的時候所有動畫
        例如：transition:width 2s ease 0s;
        http://www.w3cplus.com/content/css3-transition

CSS transform 屬性 , 只對 block 級元素生效！

代碼例子：

transition:transform
http://js.jirengu.com/gixozolufe/3/edit

animation:spin 4s;
http://js.jirengu.com/gixozolufe/12/edit

animation:spin 4s infinite;
http://js.jirengu.com/gixozolufe/14/edit

animation:spin 4s linear
http://js.jirengu.com/rokirocisa/2/edit

animation:spin 4s 2;
http://js.jirengu.com/tebubeyire/1/edit

animation:spin 1s infinite linear;
http://js.jirengu.com/jocuxufene/4/

animation:spin 1s alternate;
http://js.jirengu.com/jocuxufene/8/edit?html,css,output

animation:spin 1s infinite linear alternate;
http://js.jirengu.com/jocuxufene/7/edit

animation:spin 1s alternate; 0%-50%-100%
http://js.jirengu.com/jocuxufene/11/edit?html,css,output

綜合動畫 transition transform rotat scale translate
代碼：http://js.jirengu.com/futamaxaju/9/edit?html,css,js
頁面：http://js.jirengu.com/futamaxaju/9

瀏覽器兼容（Browser compatibility）
Desktop:

image.png

Mobile:

image.png