CSS3 動(dòng)畫

第一步,@keyframes 定義動(dòng)畫規(guī)則沦泌,包括動(dòng)畫名稱以及起始/結(jié)束樣式辽慕。

語法.

@keyframes 動(dòng)畫名稱{

? ? from {樣式1,樣式2赦肃,溅蛉。。他宛。}

? ? to {樣式1船侧,樣式2,厅各。镜撩。。}

}

亦可

@keyframes 動(dòng)畫名稱{

? ? 0% {樣式1队塘,樣式2袁梗,。憔古。遮怜。}

? ? 60% {樣式1,樣式2鸿市,锯梁。。焰情。}

? ? …….

? ? 100% {樣式1陌凳,樣式2,内舟。合敦。。}

}

可用top验游,bottom充岛,left,right定位批狱,使位置改變裸准。

補(bǔ)充說明.?

IE10及以上,Opera赔硫,F(xiàn)irefox炒俱,Chrome,Safari支持@keyframes規(guī)則及animation屬性。

部分特殊內(nèi)核的瀏覽器需加前綴权悟,如chrome和safari的內(nèi)核是webkit砸王,需加-webkit-前綴。

關(guān)于瀏覽器內(nèi)核峦阁,可參考鏈接?各主流瀏覽器介紹

第二步谦铃,animation為元素綁定動(dòng)畫,以及設(shè)置動(dòng)畫持續(xù)時(shí)長(zhǎng)等屬性榔昔。

語法.

選擇器 {

? ? animation:動(dòng)畫名稱 5s; /* 時(shí)長(zhǎng)默認(rèn)為0驹闰,不定義則動(dòng)畫不生效 */

? ? -moz-animation:動(dòng)畫名稱 5s; /* firefox */

? ? -webkit-animation:動(dòng)畫名稱 5s; /* Chrome,Safari */

? ? -o-animation:? 動(dòng)畫名稱 5s; /* Opera */

}

補(bǔ)充說明.

animation為簡(jiǎn)寫形式撒会,默認(rèn)值:none 0 ease 0 1 normal嘹朗,其中包含:

1. animation-name:keyframe規(guī)則名稱,默認(rèn)none(無動(dòng)畫)

2. animation-duration:定義動(dòng)畫完成一個(gè)周期需要多長(zhǎng)時(shí)間诵肛,可以s/ms為單位屹培。默認(rèn)0(無動(dòng)畫)

3. animation-timing-function:規(guī)定動(dòng)畫的速度曲線,如勻速怔檩。默認(rèn)ease褪秀。

? ? a. linear:勻速

? ? b. ease:低速開始,然后加快薛训,結(jié)束前變慢

? ? c. ease-in:低速開始

? ? d. ease-out:低速結(jié)束

? ? e. ease-in-out:以低速開始和結(jié)束

? ? f. cubic-bezier(n,n,n,n):自定義曲線媒吗,可能值為從0到1

4. animation-delay:延時(shí)播放,允許負(fù)值(使動(dòng)畫馬上開始许蓖,但是動(dòng)畫會(huì)跳過負(fù)值時(shí)間蝴猪。比如過delay-2,duration5膊爪,那么動(dòng)畫會(huì)直接從2秒之后開始播放)

5. animation-iteration-count:規(guī)定動(dòng)畫播放的次數(shù),默認(rèn)1嚎莉,也可指定為infinite(無限次播放)

6. animation-direction:規(guī)定是否輪流反向播放動(dòng)畫米酬,默認(rèn)normal。指定為alternate時(shí)趋箩,動(dòng)畫輪流反向播放(奇數(shù)135正常播放赃额,偶數(shù)反向播放)

額外屬性

animation-fill-mode: 動(dòng)畫開始前或結(jié)束后,元素是否填充叫确√迹可取值如下:

? ? a. none:不改變默認(rèn)行為。

? ? b. forwards: 動(dòng)畫結(jié)束后竹勉,以最后一幀(to)作為填充

????c. backwards:動(dòng)畫開始前(animation-delay時(shí))飞盆,以初始幀(from)作為填充

? ? d. both:應(yīng)用forwards和backwards。



本文內(nèi)容參考了w3cschool 動(dòng)畫教程w3school CSS3動(dòng)畫教程

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市吓歇,隨后出現(xiàn)的幾起案子孽水,更是在濱河造成了極大的恐慌,老刑警劉巖城看,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件女气,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡测柠,警方通過查閱死者的電腦和手機(jī)炼鞠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來轰胁,“玉大人谒主,你說我怎么就攤上這事∪硗拢” “怎么了瘩将?”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)凹耙。 經(jīng)常有香客問我姿现,道長(zhǎng),這世上最難降的妖魔是什么肖抱? 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任备典,我火速辦了婚禮,結(jié)果婚禮上意述,老公的妹妹穿的比我還像新娘提佣。我一直安慰自己,他們只是感情好荤崇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開白布拌屏。 她就那樣靜靜地躺著,像睡著了一般术荤。 火紅的嫁衣襯著肌膚如雪倚喂。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評(píng)論 1 305
  • 那天瓣戚,我揣著相機(jī)與錄音端圈,去河邊找鬼。 笑死子库,一個(gè)胖子當(dāng)著我的面吹牛舱权,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仑嗅,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼宴倍,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼张症!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起啊楚,我...
    開封第一講書人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤吠冤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后恭理,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拯辙,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年颜价,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了涯保。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡周伦,死狀恐怖夕春,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情专挪,我是刑警寧澤及志,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站寨腔,受9級(jí)特大地震影響速侈,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜迫卢,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一倚搬、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧乾蛤,春花似錦每界、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至上荡,卻和暖如春谐岁,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背榛臼。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留窜司,地道東北人沛善。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像塞祈,于是被迫代替她去往敵國(guó)和親金刁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容