動畫調用語法 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 縮小翻轉收走 最后附： 下載連接

總結

以上是生活随笔為你收集整理的自己整理的css3动画库，附下载链接的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。