說說css3動畫效果那點事兒（一）

「h5，css3很強大呀，css3動畫效果很好呀」，今天，我們便來初識一下css3的魅力吧……

1. animation //css3動畫，從一種樣式轉變為另一種樣式的效果

語法：animation: name duration timing-function delay iteration-count direction play-state fill-mode;

引數意義

name

／／繫結到選擇器的keyframe名稱，預設值none，所以animation必須要有這個引數，語法@keyframes name｛ keyframes－selector ｛css－style｝｝

duration

／／完成動畫所需要的時間，預設為0，所以animation必須要有時間

timing-function／／速度曲線，預設是ease（低速開始，變快，低速結束），ease-in(低速開始)，ease－out(低速結束)，ease-in-out（低速開始和結束，雖然個人覺得跟ease效果差不多，不過ease整體速度更快），linear（相同速度）；

delay

／／規定動畫何時開始，負數指動畫馬上開始，但跳過相應的數值進入動畫，預設為0；

fill-mode／／規定動畫是在動畫之前或之後，none（預設值，無），forwards（當動畫完成後，保持最後乙個屬性值，即在最後乙個關鍵幀中定義），backwards（在animation-delay的一段時間內，在動畫顯示之前，在第一幀中定義），both（向前向後模式都被應用）

2. transform／／允許對元素進行旋轉，傾斜，縮放或移動，列常用的4個元素，其中旋轉、縮放、傾斜都可以通過transform-origin屬性重置元素的原點，但其中的translate適中以元素的中心點進行位移

rotate（30deg）／／順時針旋轉30角度，負數表示逆時針旋轉

translate（20px，10px）／／表示位移，x方向（右）20畫素，y方向（上）10px，負數則是相反的

scale（1.5）／／縮放，表示放大的倍數，即（x和y方向均放大1.5倍），scale（a，b）表示x軸放大a倍，y方向放大b倍

skew（a，b）／／傾斜（扭曲），表示x方向逆時針方向a角度，y方向順時針旋轉b角度

3. transition／／表示過渡，語法：transition: property duration timing-function delay;

property／／過渡效果的名稱

duration／／過渡效果的時間

timing-function／／效果的速度曲線，同animation

delay／／效果開始的時間

未完待續…………（本次語法講的稍多）

參考**：