過度效果語法

語法：
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

默認值：看每個獨立屬性

取值：
[ transition-property ]： 檢索或設置對象中的參與過渡的屬性
[ transition-duration ]： 檢索或設置對象過渡的持續(xù)時間
[ transition-timing-function ]： 檢索或設置對象中過渡的動畫類型
[ transition-delay ]： 檢索或設置對象延遲過渡的時間

• transition-property
  語法
  transition-property：all | none | property[ ,property ]*
  默認值：all
  取值：
  all： 所有可以進行過渡的css屬性
  none： 不指定過渡的css屬性
  property： 指定要進行過渡的css屬性
  說明
  檢索或設置對象中的參與過渡的屬性。
  如果提供多個屬性值，以逗號進行分隔

• transition-duration
  語法
  transition-duration：time[ ,time ]*
  默認值：0
  取值：
  time： 指定對象過渡的持續(xù)時間
  說明
  檢索或設置對象過渡的持續(xù)時間。
  如果提供多個屬性值，以逗號進行分隔。

• transition-time-function
  語法

  transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)[ ,linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) ]*
  默認值：ease
  說明
  檢索或設置對象中過渡的動畫類型。
  如果提供多個屬性值，以逗號進行分隔。
  取值
  linear： 線性過渡。等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0)
  ease： 平滑過渡。等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0)
  ease-in： 由慢到快。等同于貝塞爾曲線(0.42, 0, 1.0, 1.0)
  ease-out： 由快到慢。等同于貝塞爾曲線(0, 0, 0.58, 1.0)
  ease-in-out： 由慢到快再到慢。等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
  cubic-bezier(number, number, number, number)： 特定的貝塞爾曲線類型，4個數(shù)值需在[0, 1]區(qū)間內

• transition-delay
  語法
  transition-delay：time[ ,time ]*
  默認值：0
  取值
  time： 指定對象過渡的延遲時間
  說明
  檢索或設置對象延遲過渡的時間。
  如果提供多個屬性值，以逗號進行分隔

縮寫方式：
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方式：
transition-property:border-color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s;

動畫animation

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

animation-name  規(guī)定 @keyframes 動畫的名稱。    
animation-duration  規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。   
animation-timing-function   規(guī)定動畫的速度曲線。默認是 "ease"。   
animation-delay 規(guī)定動畫何時開始。默認是 0。 
animation-iteration-count   規(guī)定動畫被播放的次數(shù)。默認是 1。   
animation-direction 規(guī)定動畫是否在下一周期逆向地播放。默認是 "normal"。  
animation-play-state    規(guī)定動畫是否正在運行或暫停。默認是 "running"。    
animation-fill-mode 規(guī)定對象動畫時間之外的狀態(tài)。

• 關鍵幀語法

@KEYFRAMES寫法
@keyframes IDENT {
from { Properties:Properties value; }
Percentage { Properties:Properties value; }
to { Properties:Properties value; }
}