CSS3之 transform和animation區別

CSS3 有3種和動畫相關的屬性：transform, transition, animation。其中 transform 描述了元素靜態樣式。而transition 和 animation 卻都能實現動畫效果。因此transform 經常配合後二者使用

 

1、transform  描述的是元素靜態樣式

         transform屬性應用於元素的2D或3D轉換。這個屬性容許你將元素旋轉，縮放，移動，傾斜等。 必須是鼠標移上或者點擊執行屬性變化，鼠標離開屬性迴歸。說到底就是屬性不會變化。配合-webkit-transition: 0.3s;transition: 0.3s;纔會有動畫的效果，不然會很生硬。

       旋轉：rote(30deg)    水平面以元素中心旋轉多少度；

       rotateX(angle)   定義沿着 X 軸的 3D 旋轉；

       rotateY(angle)   定義沿着 Y 軸的 3D 旋轉；

 

       位移 ：translate(x,y)   定義 2D 轉換;

       translate3d(x,y,z)  定義 3D 轉換;

       縮放：scale(x,y)   定義 2D 縮放轉換;

       scale3d(x,y,z)   定義 3D 縮放轉換;

 

2、實現動畫效果的：transition   animation

    一、transition  

     transition 屬性是一個簡寫屬性，用於設置四個過渡屬性 

     transition: property duration timing-function delay;

      過渡的屬性  ，完成過分效果須要時間  ，  速度曲線， 延遲時間

        .one1{transition: width 3s linear 2s;}    .one1:hover{width:300px;}

      transition定義了動畫的屬性、時間、速度曲線以及延遲時間  ；一般和hover等事件配合使用，由事件觸發。

     

    二、animation  

      animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：

      animation的使用必須結合@keyframes animation-name使用

         @keyframes  move{

                 form{ left:0px;}   to{ left:200px;}

          }

     在須要動畫的元素上面添加動畫  div{animation:move 5s infinite;}

     animation: name duration timing-function delay iteration-count direction;

   動畫名稱，動畫執行時間，速度曲線，動畫延遲時間，播放次數，是否反向播放

     animation能夠設定每一幀的樣式和時間

   

 區別：

    1.  觸發條件不一樣。transition一般和hover等事件配合使用，由事件觸發。animation則當即播放。

     2. 循環。 animation能夠設定循環次數。

     3. 精確性。 animation能夠設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中能夠設置每一幀須要單獨變化的樣式屬性， transition中全部樣式屬性都要一塊兒變化。

    4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天做之合，比以前只能用js時爽太多。