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

rotate(180deg)2D旋轉(zhuǎn)正值代表順時(shí)針旋轉(zhuǎn)180度，負(fù)值代表逆時(shí)針旋轉(zhuǎn)，用法transform:rotate(180deg);

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

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

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

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

rotate用法：

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

skew(45deg,45deg)2D斜切，代表水平方向和垂直方向同時(shí)扭曲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，如果是一個(gè)2D圖看不出來效果。用法transform.scaleZ(0.5);

scale實(shí)現(xiàn)

  
    
    
  
  
    
scale
    
scaleX
    
scaleY
    
scaleZ
  

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

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

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

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

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

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

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

translate用法

  
    
    
  
  
    
translate
    
translate3d
    
translateX
    
translateY
    
translateZ
  

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

transform-origin: left top;修改中心點(diǎn)為左上角，相當(dāng)于transform-origin: 0 0;右下角transform-origin: right bottom;相當(dāng)于transform-origin: 100% 100%;

如果我們同時(shí)需要進(jìn)行多個(gè)變形，我們可以這樣寫

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

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

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

transition-duration:指定完成過渡所需的時(shí)間，完成一次動(dòng)畫所需時(shí)間

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

transition-delay:指定開始出現(xiàn)的延遲時(shí)間，如果沒有延遲我們可以用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中我們可以給多個(gè)屬性加動(dòng)畫，下面是加動(dòng)畫的幾種方式。

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

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

@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)建的動(dòng)畫名，當(dāng)為none時(shí)，將沒有任何動(dòng)畫效果，可以用于覆蓋任何動(dòng)畫。

animation-duration:指定完成過渡所需的時(shí)間，完成一次動(dòng)畫所需時(shí)間

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

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

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

animation-direction:normal/alternate動(dòng)畫播放的方向

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

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

1.none默認(rèn)值，表示動(dòng)畫將按預(yù)期進(jìn)行和結(jié)束，在動(dòng)畫完成其最后一幀時(shí)，動(dòng)畫會(huì)反轉(zhuǎn)到初始幀處。
2.forwards表示動(dòng)畫在結(jié)束后繼續(xù)應(yīng)用最后的關(guān)鍵幀的位置。
3.backwards會(huì)在向元素應(yīng)用動(dòng)畫樣式時(shí)迅速應(yīng)用動(dòng)畫的初始幀。
4.both元素動(dòng)畫同時(shí)具有forwards和backwards效果