3d變換屬性
每個屬性多了一個Z

rotate旋轉
translate 平移
perspective：2000px透視點
perspective-origin：25% 75%；
transform-style：preserve-3d：該聲明應用在3d變換的兄弟元素們的父元素上，也就是舞臺元素

關鍵幀
@KEYFRAMES寫法
@-webkit-keyframes INENT{
from{Properties:properties value;}
percentage{Properties:Properties value;}
to{ Properties:properties value;}
}
animate屬性
-webkit-animation-name:”move”；動畫屬性名，也就是我們前面keyframes定義的動畫名
/*aninn*/
     /*-webkit-animation-name: "move";
     -o-animation-name: "move";
     animation-name: "move";*/

-webkit-anmiation-duration：10s 動畫持續時間
/*duration 持續時間*/
/*-webkit-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;*/
-webkit-anmiation-timing-function：ease-in-out:動畫頻率 和transition-timing-function是一樣的
  /*頻率animtf*/
     /*-webkit-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     -o-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);*/
-webkit-animation-delay：2s；動畫延遲時間
-webkit-animation-iteration-count:10;定義循環的次數，infinite為無限次
/*循環次數 animic infinite 無限次循環*/
     /*-webkit-animation-iteration-count: 10;
     -o-animation-iteration-count: 10;
     animation-iteration-count: 10;*/
-webkit-animation-direction：alternate 定義動畫輪流反向播放
/*animdi默認返回原位置 反向執行*/
     /*-webkit-animation-direction: alternate;
     -o-animation-direction: alternate;
     animation-direction: alternate;*/
-webkit-animation-paly-state：paused；paused暫定，running播放
  /*nfts 動畫的播放狀態 pushed暫停*/
     /*-webkit-animation-play-state: running;
     -o-animation-play-state: running;
     animation-play-state: running;*/
-webkit-animation-fill-mode:forwards:保持最后一個屬性值
/*animfm保持最后一個值*/
     /*-webkit-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;*/
         /*動畫的名字 動畫的時間 運動曲線 循環次數*/
animation
  /*動畫的名字 動畫的時間 運動曲線 循環次數*/
     -webkit-animation: "move" 2s linear 2;
     -o-animation: "move" 2s linear 2;
     animation: "move" 2s linear 2;

 <style type="text/css">
    /*關鍵幀  在css中聲明 定義動畫*/
    @-webkit-keyframes "move"{
     0%{
      /*開始 一般省略*/
         *transform*: translateX(0); 
     }
     30%{
            *transform*: translateX(100px); 
     }
     /*60%{
      -webkit-transform: translate(50px,100px);
      -ms-transform: translate(50px,100px);
      -o-transform: translate(50px,100px);
      transform: translate(50px,100px);
     }*/
     100%{
      *transform*: translateX(0px);
     }
    }
    div{
     *width*: 100px;
     *height*: 100px;
     *background-color*: red;
     /*aninn*/
     /*-webkit-animation-name: "move";
     -o-animation-name: "move";
     animation-name: "move";*/
     /*duration 持續時間*/
     /*-webkit-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;*/
        /*頻率animtf*/
     /*-webkit-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     -o-animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);
     animation-timing-function: cubic-bezier(0, 1.85, 0, 0.07);*/

     /*循環次數 animic infinite 無限次循環*/
     /*-webkit-animation-iteration-count: 10;
     -o-animation-iteration-count: 10;
     animation-iteration-count: 10;*/
        /*animdi默認返回原位置 反向執行*/
     /*-webkit-animation-direction: alternate;
     -o-animation-direction: alternate;
     animation-direction: alternate;*/
        /*nfts 動畫的播放狀態 pushed暫停*/
     /*-webkit-animation-play-state: running;
     -o-animation-play-state: running;
     animation-play-state: running;*/

     /*animfm保持最后一個值*/
     /*-webkit-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;*/
         /*動畫的名字 動畫的時間 運動曲線 循環次數*/
     *-webkit-animation*: "move" 2s *linear *2;
     -o-animation: "move" 2s *linear *2;
     *animation*: "move" 2s *linear *2;
    }