成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

自己整理的css3動(dòng)畫庫,附下載鏈接

Darkgel / 3093人閱讀

摘要:動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。在函數(shù)中自己的值。在所指定的一段時(shí)間內(nèi),在動(dòng)畫顯示之前,應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。

動(dòng)畫調(diào)用語法 animation: bounceIn 0.3s ease 0.2s 1 both; 按順序解釋參數(shù): 動(dòng)畫名稱 如:bounceIn 一周期所用時(shí)間 如:0.3s 速度曲線 如:ease
描述
linear 動(dòng)畫從頭到尾的速度是相同的。
ease 默認(rèn)。動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。
ease-in 動(dòng)畫以低速開始。
ease-out 動(dòng)畫以低速結(jié)束。
ease-in-out 動(dòng)畫以低速開始和結(jié)束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數(shù)中自己的值。可能的值是從 0 到 1 的數(shù)值。
動(dòng)畫開始時(shí)間 如: 0.2s 播放次數(shù) 如:1 如果要一直循環(huán)就設(shè)置 infinite 動(dòng)畫在播放之前或之后,其動(dòng)畫效果是否可見 如:both
描述
none 不改變默認(rèn)行為。
forwards 當(dāng)動(dòng)畫完成后,保持最后一個(gè)屬性值(在最后一個(gè)關(guān)鍵幀中定義)。
backwards 在 animation-delay 所指定的一段時(shí)間內(nèi),在動(dòng)畫顯示之前,應(yīng)用開始屬性值(在第一個(gè)關(guān)鍵幀中定義)。
both 向前和向后填充模式都被應(yīng)用。
兼容性設(shè)置動(dòng)畫 -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中的動(dòng)畫效果 vanishIn 中心縮小的模糊變清楚后顯示 vanishOut 中心放大清楚變模糊后消失 twisterInUp 從右側(cè)螺旋轉(zhuǎn)進(jìn)來放大 slideUp 向上移動(dòng) slideDown 向下移動(dòng) puffOut 中心放大清楚變粒子后消失 puffIn 從外向中心縮小出現(xiàn) twisterInDown 從左側(cè)螺旋轉(zhuǎn)進(jìn)來放大 rollIn 從左側(cè)翻滾進(jìn)來 lightSpeedIn 從右側(cè)光速進(jìn)入 lightSpeedOut 光速出去 fadeIn 原地淡入· fadeOut 原地淡出 fadeInLeft 從左側(cè)移入,淡入 fadeInRight 從右側(cè)移入,淡入 fadeInDown 從上方移入,淡入 fadeInUp 從下方移入,淡入 fadeOutDown 向下移出,淡出 fadeOutLeft 向左移出,淡出 fadeOutRight 向右移出,淡出 fadeOutUp 向上移出,淡出 swing 扭動(dòng)搖晃 wobble 左右大幅度搖晃 rotateIn 旋轉(zhuǎn)360度 flip 橫向翻轉(zhuǎn) zoomIn 中心放大顯示 zoomOut 向中心縮小消失 bounceIn 從中心擴(kuò)大彈出顯示 bounceInLeft 從左側(cè)彈入 bounceInRight 從右側(cè)彈入 bounceInUp 向上彈入 bounceInDown 向下彈入 bounceOut 向中心彈出消失 bounceOutDown 向下彈消失 bounceOutLeft 向左彈消失 bounceOutRight 向右彈消失 bounceOutUp 向上彈消失 rollOut 向右滾出消失 rubberBand 原地彈性彈一下 heartbeat 原地像心跳一樣彈一下 flipOutY y軸翻轉(zhuǎn)消失 flipInX x軸翻轉(zhuǎn)顯示 flipInY y軸翻轉(zhuǎn)顯示 flipOutX x軸翻轉(zhuǎn)消失 tada 原地抖動(dòng) jello 原地斜向抖動(dòng) flash 原地閃爍 pulse 原地輕微放大后還原 sharp 模糊到清楚顯現(xiàn) scaleUp 原地放大 scaleDown 原地縮小 blur 原地變模糊保持模糊狀態(tài) start 閃現(xiàn)一下消失 rightflip 閃現(xiàn)一下向右消失 shake 原地抖動(dòng) hinge 剝落 boingInUp 向前蕩入 holeOut 縮小翻轉(zhuǎn)收走 ? 最后附:下載連接

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/2321.html

相關(guān)文章

  • 前端常用插件、工具類庫匯總

    摘要:頁面調(diào)試騰訊開發(fā)維護(hù)的代碼調(diào)試發(fā)布,錯(cuò)誤監(jiān)控上報(bào),用戶問題定位。同樣是由騰訊開發(fā)維護(hù)的代碼調(diào)試工具,是針對(duì)移動(dòng)端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動(dòng)畫庫動(dòng)畫庫,也是目前通用的動(dòng)畫庫。 本人微信公眾號(hào):前端修煉之路,歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具,方便日后自己查找和使用。 另外,感謝白小明,文中很多的工具來源于此。 彈出框 layer:http://layer....

    GitCafe 評(píng)論0 收藏0
  • 可能是最全前端動(dòng)效庫匯總

    摘要:非常的龐大,而且它是完全為設(shè)計(jì)而生的動(dòng)效庫。它運(yùn)行于純粹的之上,是目前最強(qiáng)健的動(dòng)畫資源庫之一??赡苁莿?chuàng)建滾動(dòng)特效最好用的工具,它支持大量的瀏覽器,只要它們支持和特性。可以通過安裝吊炸天了,接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫。 收集日期為2019-02-28,★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫,是許多基礎(chǔ)動(dòng)...

    afishhhhh 評(píng)論0 收藏0
  • 2018年值得期待11個(gè)Javascript動(dòng)畫庫

    摘要:超過的,是一個(gè)動(dòng)畫庫,可以處理屬性,單個(gè)轉(zhuǎn)換,或任何屬性以及對(duì)象。在,是一個(gè)快速的動(dòng)畫引擎,具有與的相同的。在,這個(gè)功能和反應(yīng)動(dòng)畫庫只重。由和其他人使用,這個(gè)庫既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁尋找一個(gè)整潔的Javascript動(dòng)畫庫時(shí),我發(fā)現(xiàn)很多recommended的動(dòng)畫庫一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究,我收集了11個(gè)最好的庫,在你的應(yīng)用程序中使用。我還添加了一些,主要是非維...

    call_me_R 評(píng)論0 收藏0
  • 2018年值得期待11個(gè)Javascript動(dòng)畫庫

    摘要:超過的,是一個(gè)動(dòng)畫庫,可以處理屬性,單個(gè)轉(zhuǎn)換,或任何屬性以及對(duì)象。在,是一個(gè)快速的動(dòng)畫引擎,具有與的相同的。在,這個(gè)功能和反應(yīng)動(dòng)畫庫只重。由和其他人使用,這個(gè)庫既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁尋找一個(gè)整潔的Javascript動(dòng)畫庫時(shí),我發(fā)現(xiàn)很多recommended的動(dòng)畫庫一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究,我收集了11個(gè)最好的庫,在你的應(yīng)用程序中使用。我還添加了一些,主要是非維...

    teren 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<