自己整理的css3動畫庫，附下載鏈接

-Advertisement-

動畫調用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數：動畫名稱如：bounceIn 一周期所用時間如：0.3s 速度曲線如：ease 值描述 linear 動畫從頭到尾的速度是相同的。 ease 預設。動畫以低速開始，然後加快， ...

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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

JS實現圖片base64轉blob對象，壓縮圖片，預覽圖片，圖片旋轉到正確角度

base64轉blob對象壓縮圖片圖片預覽詳細圖片預覽可參考地址：《搞清Image載入事件(onload)、載入狀態(complete)後，實現圖片的本地預覽，並自適應於父元素內(完成)》圖片旋轉到正確的角度（驗證可行）參考地址： file上傳圖片，base64轉換、壓縮圖片、預覽圖片、將 ...
獲取用戶精準地理位置信息（百度地圖）

獲取用戶精準地理位置信息步驟： 1.通過 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法獲取經緯度； 2.使用百度地圖坐標轉換介面（http://api.map.baidu.com/geoconv/v1/?c ...
百度前端學院-基礎學院-第四課

今天是第四天，進度可以，表揚一下自己。今天的課程目標是：掌握 CSS 稍微複雜的一些選擇器，還有背景，邊框等一些 CSS 樣式屬性。 CSS背景：背景色：background-color:gray; 背景圖：background-image:url(www.......); 背景顏色漸變：背景 ...
微信小程式發現之旅（一）—— 項目搭建與頁面跳轉

開發微信小程式需要註冊一個小程式賬號，具體流程可以參照官方教程： https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 開通賬戶之後，在 “開發設置” 中獲取到 AppID，然後打開開發工具創建項目一、創建項目創建項目的時候，建議把 AppId ...
JavaScript DOM

DOM節點整個文檔是一個文檔節點整個文檔是一個文檔節點每個HTML元素是元素節點每個HTML元素是元素節點 HTML元素內的文本是文本節點 HTML元素內的文本是文本節點每個HTML屬性是屬性節點每個HTML屬性是屬性節點註釋是註釋節點註釋是註釋節點 HTML DOM節點數 HTML ...
深入淺出理解同步 /非同步/併發/並行/串列

（1）從線程的時效來看：分為同步和非同步同步:多個任務情況下，一個任務A執行結束，才可以執行另一個任務B。只存在一個線程。非同步:多個任務情況下，一個任務A正在執行，同時可以執行另一個任務B。任務B不用等待任務A結束才執行。存在多條線程。（2）從線程的執行來看：分為串列隊列和並行隊列串列隊列：串 ...
整理 45 道 CSS 基礎面試題（附答案）

1、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin 2、box-sizing ...
js的棧與堆

JavaScript中基本數據類型和引用數據類型的區別這是我引用別人的覺得很好 1、基本數據類型和引用數據類型 ECMAScript包括兩個不同類型的值：基本數據類型和引用數據類型。基本數據類型指的是簡單的數據段，引用數據類型指的是有多個值構成的對象。當我們把變數賦值給一個變數時，解析器首先 ...