CSS3過渡和動畫

1.transition過渡

  • 1.指定元素transition: 1s height, 1s width;
  • 2.延遲
transition: 1s height, 1s 1s width;
// 上面代碼指定滓鸠,width在1秒之后再開始變化习勤,也就是延遲(delay)1秒
  • 3.狀態(tài)變化速度
  • ease:慢-快-慢(默認)
  • linear:勻速
  • ease-in:加速
  • ease-out:減速
  • cubic-bezier函數(shù):自定義速度模式演示

語法

// 完整寫法
transition: 1s 1s height linear;
// 常用寫法
transition: 1s;

注意transition一般加在原始元素上绞铃,不要加在hover,active等狀態(tài)上孽椰,不然只針對某種狀態(tài)委粉。

2.animation動畫

定義動畫

  • 0%可以用from代表茎辐,100%可以用to代表
@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}
// 相當于
@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}
  • 如果省略某個狀態(tài)叫挟,瀏覽器會自動推算中間狀態(tài)
@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}
  • 可以把多個狀態(tài)寫在一行
@keyframes pound {
  from,to { transform: none; }
  50% { transform: scale(1.2); }
}

動畫參數(shù)

  • animation-fill-mode 動畫結(jié)束時的狀態(tài)
  • none:默認值昼激,回到動畫沒開始時的狀態(tài)
  • forwards:讓動畫停留在結(jié)束狀態(tài)
  • backwards:讓動畫回到第一幀的狀態(tài)
  • both: 根據(jù)animation-direction(見后)輪流應用forwards和backwards規(guī)則
  • animation-direction動畫循環(huán)的方式
  • normal默認值
  • alternate
  • reverse
  • alternate-reverse
    具體參照下圖


    animation-direction.png

    常用的值是normal和reverse庇绽。瀏覽器對其他值的支持情況不佳,應該慎用橙困。

動畫語法

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}
// 相當于
div:hover {
  animation-name: rainbow;
// 動畫名稱
  animation-duration: 1s;
// 持續(xù)時間
  animation-timing-function: linear;
// 動畫狀態(tài)
  animation-delay: 1s;
// 動畫延遲
  animation-fill-mode:forwards;
// 動畫結(jié)束狀態(tài)
  animation-direction: normal;
// 動畫循環(huán)方式
  animation-iteration-count: 3;
// 動畫循環(huán)次數(shù)瞧掺,設為infinite則為無限循環(huán)
}

steps函數(shù)

用于實現(xiàn)逐幀動畫

div:hover {
 animation: 10s rainbow infinite steps(10,start);
}
動畫將被分成10幀來播放,而不是平滑過渡凡傅。第二個參數(shù)默認為end辟狈,可設置為start。

效果參照

動畫暫停

animation-play-state

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

div:hover {
  animation-play-state: running;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末夏跷,一起剝皮案震驚了整個濱河市哼转,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌槽华,老刑警劉巖壹蔓,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異猫态,居然都是意外死亡佣蓉,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門亲雪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來勇凭,“玉大人,你說我怎么就攤上這事匆光√紫瘢” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵终息,是天一觀的道長夺巩。 經(jīng)常有香客問我,道長周崭,這世上最難降的妖魔是什么柳譬? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮续镇,結(jié)果婚禮上美澳,老公的妹妹穿的比我還像新娘。我一直安慰自己摸航,他們只是感情好制跟,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著酱虎,像睡著了一般雨膨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上读串,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天聊记,我揣著相機與錄音,去河邊找鬼恢暖。 笑死排监,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的杰捂。 我是一名探鬼主播舆床,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嫁佳!你這毒婦竟也來了峭弟?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤脱拼,失蹤者是張志新(化名)和其女友劉穎瞒瘸,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體熄浓,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡情臭,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了赌蔑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片俯在。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖娃惯,靈堂內(nèi)的尸體忽然破棺而出跷乐,到底是詐尸還是另有隱情,我是刑警寧澤趾浅,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布愕提,位于F島的核電站馒稍,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏浅侨。R本人自食惡果不足惜纽谒,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望如输。 院中可真熱鬧鼓黔,春花似錦、人聲如沸不见。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽稳吮。三九已至缎谷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盖高,已是汗流浹背慎陵。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留喻奥,地道東北人席纽。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像撞蚕,于是被迫代替她去往敵國和親润梯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

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

  • transition(過渡) 在CSS3引入transition之前css沒有時間軸甥厦,所有的狀態(tài)變化都是瞬間完成 ...
    風隨風去閱讀 708評論 0 1
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color纺铭,font,text-align刀疙,li...
    wzhiq896閱讀 1,762評論 0 2
  • 選擇qi:是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性: color舶赔,font,text-align谦秧,li...
    love2013閱讀 2,316評論 0 11
  • 看了很多視頻竟纳、文章,最后卻通通忘記了疚鲤,別人的知識依舊是別人的锥累,自己卻什么都沒獲得。此系列文章旨在加深自己的印象集歇,因...
    DCbryant閱讀 1,868評論 0 4
  • 不管我們是如何來到上海蹬挺,但是能落腳在松江维贺,讓我們找到了家庭生活以外的健康它掂、自信和幸福...巴帮,這些都是源自松江工委會...
    融機閱讀 764評論 2 9