自己整理的css3動畫庫，附下載連結

動畫呼叫語法

animation: bounceIn 0.3s ease 0.2s 1 both;

按順序解釋引數：

動畫名稱 如：bounceIn

一週期所用時間 如：0.3s

速度曲線 如：ease

值	描述
linear	動畫從頭到尾的速度是相同的。
ease	預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。

動畫開始時間 如： 0.2s

播放次數 如：1 如果要一直迴圈就設定 infinite

動畫在播放之前或之後，其動畫效果是否可見 如：both

值	描述
none	不改變預設行為。
forwards	當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向後填充模式都被應用。

相容性設定動畫

-webkit-animation:bounceInDown 0.3s ease 0.2s 1 both;

-moz-animation:bounceInDown 0.3s ease 0.2s 1 both;

-ms-animation:bounceInDown 0.3s ease 0.2s 1 both;

-o-animation:bounceInDown 0.3s ease 0.2s 1 both;

animation: bounceInDown 0.3s ease 0.2s 1 both;

 

本css中的動畫效果

vanishIn 中心縮小的模糊變清楚後顯示

vanishOut 中心放大清楚變模糊後消失

twisterInUp 從右側螺旋轉進來放大

slideUp 向上移動

slideDown 向下移動

puffOut 中心放大清楚變粒子後消失

puffIn 從外向中心縮小出現

twisterInDown 從左側螺旋轉進來放大

rollIn 從左側翻滾進來

lightSpeedIn 從右側光速進入

lightSpeedOut 光速出去

fadeIn 原地淡入·

fadeOut 原地淡出

fadeInLeft 從左側移入，淡入

fadeInRight 從右側移入，淡入

fadeInDown 從上方移入，淡入

fadeInUp 從下方移入，淡入

fadeOutDown 向下移出，淡出

fadeOutLeft 向左移出，淡出

fadeOutRight 向右移出，淡出

fadeOutUp 向上移出，淡出

swing 扭動搖晃

wobble 左右大幅度搖晃

rotateIn 旋轉360度

flip 橫向翻轉

zoomIn 中心放大顯示

zoomOut 向中心縮小消失

bounceIn 從中心擴大彈出顯示

bounceInLeft 從左側彈入

bounceInRight 從右側彈入

bounceInUp 向上彈入

bounceInDown 向下彈入

bounceOut 向中心彈出消失

bounceOutDown 向下彈消失

bounceOutLeft 向左彈消失

bounceOutRight 向右彈消失

bounceOutUp 向上彈消失

rollOut 向右滾出消失

rubberBand 原地彈性彈一下

heartbeat 原地像心跳一樣彈一下

flipOutY y軸翻轉消失

flipInX x軸翻轉顯示

flipInY y軸翻轉顯示

flipOutX x軸翻轉消失

tada 原地抖動

jello 原地斜向抖動

flash 原地閃爍

pulse 原地輕微放大後還原

sharp 模糊到清楚顯現

scaleUp 原地放大

scaleDown 原地縮小

blur 原地變模糊保持模糊狀態

start 閃現一下消失

rightflip 閃現一下向右消失

shake 原地抖動

hinge 剝落

boingInUp 向前蕩入

holeOut 縮小翻轉收走

 

最後附：下載連線