--- > css3- 過渡和動(dòng)畫

transition(過渡)

在CSS3引入transition之前css沒有時(shí)間軸耕姊,所有的狀態(tài)變化都是瞬間完成

div{
    height:15px;
    width:15px;
}

div:hover{
    height: 450px;
    width: 450px;
}

transition的作用在于墨缘,指定狀態(tài)變化所需要的時(shí)間

transition: 1s;

指定屬性

我們還可以指定transition適用的屬性,比如只適用于height

transition: 1s height;

這樣一來仪搔,只有height的變化需要1秒實(shí)現(xiàn)屠升,其他變化(主要是width)依然瞬間實(shí)現(xiàn),在同一行transition語句中誉尖,可以分別指定多個(gè)屬性

transition: 1s height, 1s width;

delay(延時(shí))

我們還可以指定變化的延時(shí)開始罪既,比如這個(gè)地方我們希望讓height先發(fā)生變化,等結(jié)束以后铡恕,再讓width發(fā)生變化琢感, 我們只需要為width指定一個(gè)delay參數(shù)

transition: 1s height, 1s 1s width;

上面代碼指定,width在1秒之后探熔,再開始變化驹针,也就是延遲(delay)1秒

delay的真正意義在于,它指定了動(dòng)畫發(fā)生的順序诀艰,使得多個(gè)不同的transition可以連在一起柬甥,形成復(fù)雜效果

transition-timing-function

transition的狀態(tài)變化速度(又稱timing function),默認(rèn)不是勻速的其垄,而是逐漸放慢苛蒲,這叫做ease
除了ease以外,其他模式還包括

  • linear:勻速
  • ease-in:加速
  • ease-out:減速
  • cubic-bezier函數(shù)(貝塞爾函數(shù))

貝塞爾函數(shù)工具

語法

transition: 1s 1s height ease;

這其實(shí)是一個(gè)簡(jiǎn)寫形式捉捅,可以單獨(dú)定義成各個(gè)屬性

transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;

注意事項(xiàng)

  • 目前撤防,各大瀏覽器(包括IE 10)都已經(jīng)支持無前綴的transition,所以transition已經(jīng)可以很安全地不加瀏覽器前綴
  • transition需要明確知道棒口,開始狀態(tài)和結(jié)束狀態(tài)的具體數(shù)值寄月,才能計(jì)算出中間狀態(tài),什么none到block之類的是不行的
  • transition是一次性的无牵,不能重復(fù)發(fā)生漾肮,除非一再觸發(fā)

事件

transitionend

  • transitionend 事件會(huì)在 CSS transition 結(jié)束后觸發(fā).
  • 當(dāng)transition完成前移除transition時(shí),比如移除css的transition-property 屬性茎毁,事件將不會(huì)被觸發(fā).如在transition完成前設(shè)置 display: none克懊,事件同樣不會(huì)被觸發(fā).
  • 幾個(gè)屬性發(fā)生了變化就觸發(fā)幾次,比如
div{
  transition: height 1s, width 1s;
}
div:hover{
  width: 100px;
  height: 100px;
}

一次hover會(huì)觸發(fā)兩次transitionend事件
  • 注意不同瀏覽器中的前綴
    • webkitTransitionEnd
    • mozkitTransitionEnd

animation(動(dòng)畫)

transition 比較簡(jiǎn)單忱辅,animation可以幫我們實(shí)現(xiàn)復(fù)雜的動(dòng)畫

基本用法
@keyframes change-color{
  0% { 
    background: red;
  }
  50%{
    background: blue;
  }
  100%{
    background: orange;
  }
}
div{
  height: 100px;
  width: 200px;
  border: 1px solid #111;
 
}
div:hover{
    animation-name: change-color;
    animation-duration: 2s;
}

我們使用keyframes(關(guān)鍵幀)來定義一個(gè)動(dòng)畫效果, change-color是我們?nèi)〉脛?dòng)畫名字,每個(gè)百分比后面寫的是相應(yīng)時(shí)間點(diǎn)我關(guān)鍵幀樣式谭溉,
定義好后墙懂,在animation(動(dòng)畫)屬性中調(diào)用,2s 表示的動(dòng)畫的持續(xù)時(shí)間

指定播放次數(shù)(animation-iteration-count)

默認(rèn)情況下扮念,動(dòng)畫只會(huì)播放一次损搬, 我們可以指定動(dòng)畫具體播放的次數(shù),比如3次:

div:hover {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: 3;
}

也可以無線循環(huán)播放:

div:hover {
    animation-name: change-color;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

心跳demo

延時(shí)(animation-delay)

animation-timing-function

動(dòng)畫播放前后的狀態(tài)(animation-fill-mode)

animation-fill-mode: none | backwards | forwards| both;
  • none: 動(dòng)畫執(zhí)行前后不改變?nèi)魏螛邮?/li>
  • forwards: 動(dòng)畫結(jié)束后的目標(biāo)保持動(dòng)畫最后一幀的樣式
  • backwards: 動(dòng)畫開始前目標(biāo)保持動(dòng)畫第一幀的樣式(必須配合延時(shí)才能看到效果, 如果設(shè)置為backwards, 延時(shí)期間的樣式是動(dòng)畫第一幀的樣式, 否則延時(shí)期間是目標(biāo)默認(rèn)樣式)
  • both: 同時(shí)應(yīng)用forwards和 backwards

動(dòng)畫播放的方向(animation-direction)

動(dòng)畫連續(xù)播放時(shí)柜与,每次都是從結(jié)束狀態(tài)跳回到起始狀態(tài)巧勤,再開始播放。animation-direction屬性弄匕,可以改變這種行為

animation-direction可以使用下列值:

  • normal: 正常播放, 默認(rèn)值;
  • reverse: 倒著播放
  • alternate: 第一次正常播放, 第二倒著播放, .. 這樣交替的循環(huán)下去
  • alternate-reverse: 第一次倒著播放, 第二次正常播放, .. 這樣交替的循環(huán)下去

下圖解釋了它的規(guī)律(假定動(dòng)畫連續(xù)播放三次)


簡(jiǎn)單說颅悉,animation-direction指定了動(dòng)畫播放的方向,最常用的值是normal和reverse迁匠。瀏覽器對(duì)其他值的支持情況不佳剩瓶,應(yīng)該慎用

語法

div:hover {
  animation-name: change-color;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

簡(jiǎn)寫


  animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction  animation-fill-mode;

例子:

div:hover {
  animation: 1s 1s change-color linear 3 forwards normal;
}

keyframes關(guān)鍵字用來定義動(dòng)畫的各個(gè)狀態(tài),它的寫法相當(dāng)自由

@keyframes change-color {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

0%可以用from代表柒瓣,100%可以用to代表儒搭,因此上面的代碼等同于下面的形式

@keyframes change-color {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

如果省略某個(gè)狀態(tài)吠架,瀏覽器會(huì)自動(dòng)推算中間狀態(tài)芙贫,所以下面都是合法的寫法。

@keyframes change-color {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes change-color {
  to { background: yellowgreen }
}

甚至傍药,可以把多個(gè)狀態(tài)寫在一行磺平。

div:hover {
  animation: 1s change-color infinite steps(10);
}

另外一點(diǎn)需要注意的是,瀏覽器從一個(gè)狀態(tài)向另一個(gè)狀態(tài)過渡拐辽,是平滑過渡拣挪。steps函數(shù)可以實(shí)現(xiàn)分步過渡。

div:hover {
  animation: 1s change-color infinite steps(10);
}

文字輸入效果demo

animation-play-state

有時(shí)俱诸,動(dòng)畫播放過程中菠劝,會(huì)突然停止。這時(shí)睁搭,默認(rèn)行為是跳回到動(dòng)畫的開始狀態(tài)赶诊,如果想讓動(dòng)畫保持突然終止時(shí)的狀態(tài),就要使用animation-play-state屬性园骆。

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}

工具

CSS3 Tool

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末舔痪,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子锌唾,更是在濱河造成了極大的恐慌锄码,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異滋捶,居然都是意外死亡痛悯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門重窟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來灸蟆,“玉大人,你說我怎么就攤上這事亲族〕纯迹” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵霎迫,是天一觀的道長斋枢。 經(jīng)常有香客問我,道長知给,這世上最難降的妖魔是什么瓤帚? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮涩赢,結(jié)果婚禮上戈次,老公的妹妹穿的比我還像新娘。我一直安慰自己筒扒,他們只是感情好怯邪,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著花墩,像睡著了一般悬秉。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上冰蘑,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天和泌,我揣著相機(jī)與錄音,去河邊找鬼祠肥。 笑死武氓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的仇箱。 我是一名探鬼主播县恕,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼工碾!你這毒婦竟也來了弱睦?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤渊额,失蹤者是張志新(化名)和其女友劉穎况木,沒想到半個(gè)月后垒拢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡火惊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年求类,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片屹耐。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡尸疆,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出惶岭,到底是詐尸還是另有隱情寿弱,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布按灶,位于F島的核電站症革,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏鸯旁。R本人自食惡果不足惜噪矛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铺罢。 院中可真熱鬧艇挨,春花似錦、人聲如沸韭赘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辞居。三九已至楷怒,卻和暖如春蛋勺,著一層夾襖步出監(jiān)牢的瞬間瓦灶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國打工抱完, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贼陶,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓巧娱,卻偏偏與公主長得像碉怔,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子禁添,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • CSS3過渡和動(dòng)畫 1撮胧、CSS3 2D變化: translate()方法: 根據(jù)左(X軸)和頂部(Y軸)位置給定的...
    pushyzheng閱讀 731評(píng)論 0 0
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font老翘,text-align芹啥,li...
    love2013閱讀 2,316評(píng)論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color锻离,font,text-align墓怀,li...
    wzhiq896閱讀 1,762評(píng)論 0 2
  • 1.transition過渡 1.指定元素transition: 1s height, 1s width; 2.延...
    蓋被吹空調(diào)閱讀 428評(píng)論 0 1
  • 楊孜 因?yàn)橄嘈诺锰昧?我的相信已經(jīng)腐朽 爛掉的不僅是信任 還有支撐信任的友誼 我不相信 如果大樓廈建...
    楊孜閱讀 172評(píng)論 0 0