摘要：指定完成過渡所需的時間，完成一次動畫所需時間指定過渡函數(shù)，動畫播放方式指定開始出現(xiàn)的延遲時間，如果沒有延遲我們可以用或者直接不寫。第一種第二種第三種被稱為關鍵幀，其類似于中的關鍵幀。表示動畫在結束后繼續(xù)應用最后的關鍵幀的位置。

rotate(180deg)2D旋轉正值代表順時針旋轉180度，負值代表逆時針旋轉，用法transform:rotate(180deg);

rotate3d(x,y,z,angle);3D旋轉
1、x是0-1之間的數(shù)值，主要用來描述元素圍繞X軸旋轉的矢量值。
2、y是0-1之間的數(shù)值，主要用來描述元素圍繞Y軸旋轉的矢量值。
3、z是0-1之間的數(shù)值，主要用來描述元素圍繞Z軸旋轉的矢量值。
4、angle是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。

rotateX(180deg)3D旋轉，元素圍繞其X軸以給定的度數(shù)進行旋轉。用法transform:rotateX(180deg);相當于transform:rotate3d(1,0,0,180deg)

rotateY(180deg)3D旋轉，元素圍繞其Y軸以給定的度數(shù)進行旋轉，用法transform:rotateY(180deg);相當于transform:rotate3d(0,1,0,180deg)

rotateZ(180deg)3D旋轉，元素圍繞其Z軸以給定的度數(shù)進行旋轉，用法transform:rotateZ(180deg);跟rotate(180deg)效果一樣。相當于transform:rotate3d(0,0,1,180deg)

rotate用法：

  
    
    
  
  
    
3D rotateY
    
3D rotateX
    
3D rotateZ
    
3D rotate3d
    
2D rotate
  

skew(45deg,45deg)2D斜切，代表水平方向和垂直方向同時扭曲45度。用法transform:skew(45deg,45deg);

skewX(45deg)2D斜切，代表水平方向扭曲45度。用法transform:skewX(45deg);

skewY(45deg)2D斜切，代表垂直方向扭曲45度。用法transform:skewY(45deg);

skew用法

  
    
    
  
  
    
skew
    
skewX
    
skewY
  

scale(1.5,0.5)2D縮放，代表水平方向縮放1.5，垂直方向縮放0.5。用法transform:scale(1.5,0.5);

scaleX(1.5)2D縮放，代表僅水平方向縮放1.5。用法transform.scaleX(1.5);

scaleY(0.5)2D縮放，代表垂直方向縮放0.5。用法transform.scaleY(0.5);

scaleX(1.5)3D縮放，代表僅水平方向縮放1.5。用法transform.scaleX(1.5);

scaleY(0.5)3D縮放，代表垂直方向縮放0.5。用法transform.scaleY(0.5);

scaleZ(0.5)3D縮放，代表z軸方向縮放0.5，如果是一個2D圖看不出來效果。用法transform.scaleZ(0.5);

scale實現(xiàn)

  
    
    
  
  
    
scale
    
scaleX
    
scaleY
    
scaleZ
  

translate(50px,100px)2D位移，代表水平方向向右移動50像素，垂直方向向下移動100像素。用法transform:translate(50px,100px);

translateX(50px)2D位移，代表水平方向向右移動50像素。transform:translateX(50px);

translateY(100px)2D位移，代表垂直方向向下移動100像素。用法transform:translateY(100px);

translate3d(x,y,z)3D位移，代表水平方向向右移動50像素，垂直方向向下移動100像素，z軸移動100像素。用法transform:translate3d(50px,100px,100px);

translateX(50px)3D位移，代表水平方向向右移動50像素。transform:translateX(50px);

translateY(100px)3D位移，代表垂直方向向下移動100像素。用法transform:translateY(100px);

translateZ(100px)3D位移，代表Z軸方向移動100像素。用法transform:translateZ(100px);

translate用法

  
    
    
  
  
    
translate
    
translate3d
    
translateX
    
translateY
    
translateZ
  

matrix(a,b,c,d,e,f)矩陣，具體暫不深入了解，等其他的用熟練之后再深入了解

transform-origin: left top;修改中心點為左上角，相當于transform-origin: 0 0;右下角transform-origin: right bottom;相當于transform-origin: 100% 100%;

如果我們同時需要進行多個變形，我們可以這樣寫

transform:rotate(360deg) scale(1.2,1.2);

在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實現(xiàn)：
第一，在默認樣式中聲明元素的初始狀態(tài)樣式；
第二，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)；
第三，在默認樣式中通過添加過渡函數(shù)，添加一些不同的樣式。

transition-property:指定過渡或動態(tài)模擬的CSS屬性，我們也可以寫all或者直接不寫，代表過渡所有的屬性。

transition-duration:指定完成過渡所需的時間，完成一次動畫所需時間

transition-timing-function:指定過渡函數(shù)，動畫播放方式

transition-delay:指定開始出現(xiàn)的延遲時間，如果沒有延遲我們可以用0s或者直接不寫。

transition: background-color .5s ease .1s;總和寫法

transition使用方法

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -webkit-transition: background-color .5s ease .1s;
  transition: background-color .5s ease .1s;
}
div:hover {
  background-color: orange;
}

上面內(nèi)容也可以寫成下面樣式

div {
  width: 200px;
  height: 200px;
  background-color:red;
  margin: 20px auto;
  -ms-transition-property:background-color;
  -moz-transition-property:background-color;
  -webkit-transition-property:background-color;
  -o-transition-property:background-color;
  transition-property:background-color;
  -ms-transition-duration: .5s;
  -moz-transition-duration: .5s;
  -webkit-transition-duration: .5s;
  -o-transition-duration: .5s;
  transition-duration: .5s;
  -ms-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -ms-transition-delay: .2s;
  -moz-transition-delay: .2s;
  -webkit-transition-delay: .2s;
  -o-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  background-color: orange;
}

在transiton中我們可以給多個屬性加動畫，下面是加動畫的幾種方式。

第一種:
transition:all 1s ease 1s;
第二種：
transition:width 1s,height 2s,color 3s;
第三種：
transition:width 1s;
transition:height 2s;
transition:color 3s;

@keyframes被稱為關鍵幀，其類似于flash中的關鍵幀。常用方式

@keyframes changecolor{
  0%{
   background: red;
  }
  50%{
    background: green;
  }
  100%{
    background: green;
  }
}

或者

@keyframes changecolor{
  from{
   background: red;
  }
  to{
    background: green;
  }
}

animation-name: none指定@keyframes創(chuàng)建的動畫名，當為none時，將沒有任何動畫效果，可以用于覆蓋任何動畫。

animation-duration:指定完成過渡所需的時間，完成一次動畫所需時間

animation-timing-function指定過渡函數(shù)，動畫播放方式

animation-delay指定開始出現(xiàn)的延遲時間

animation-iteration-count:1;指定播放次數(shù)，如果值為infinite動畫將會無限次的播放

animation-direction:normal/alternate動畫播放的方向

animation-play-state:running/paused動畫播放的狀態(tài)，正在播放/暫停。其中running是其默認值，主要作用就是類似于音樂播放器一樣，可以通過paused將正在播放的動畫停下來，也可以通過running將暫停的動畫重新播放，這里的重新播放不一定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外如果暫停了動畫的播放，元素的樣式將回到最原始設置狀態(tài)。

animation-fill-mode 定義在動畫開始之前和結束之后發(fā)生的操作。主要具有四個屬性值：none、forwards、backwords和both。

1.none默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處。
2.forwards表示動畫在結束后繼續(xù)應用最后的關鍵幀的位置。
3.backwards會在向元素應用動畫樣式時迅速應用動畫的初始幀。
4.both元素動畫同時具有forwards和backwards效果