400-650-7353
您所在的位置：首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎(chǔ)知識】過渡動畫和關(guān)鍵幀動畫使用和區(qū)別

【W(wǎng)eb前端基礎(chǔ)知識】過渡動畫和關(guān)鍵幀動畫使用和區(qū)別

  • 發(fā)布： Web前端培訓(xùn)
  • 來源：Web前端干貨資料
  • 2019-12-27 17:26:59
  • 閱讀()
  • 分享
  • 手機(jī)端入口

一、CSS3 過渡

transition

css3的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點(diǎn)、被點(diǎn)擊或?qū)υ厝魏胃淖冎杏|發(fā)，并圓滑地以動畫效果改變CSS的屬性值

transition-property：檢索或設(shè)置對象中的參與過渡的屬性

transition-duration：檢索或設(shè)置對象過渡的持續(xù)時間

transition-delay：檢索或設(shè)置對象延遲過渡的時間

transition-timing-function：檢索或設(shè)置對象中過渡的動畫類型

貝塞爾曲線：

屬性值：cubic-bezier()

貝塞爾曲線網(wǎng)址：http://cubic-bezier.com/

簡寫：transition:all/具體屬性值 運(yùn)動時間s/ms 延遲時間s/ms 動畫類型

最簡寫：transition:運(yùn)動時間s/ms

案例：懸停div,讓p標(biāo)簽沿著x方向發(fā)生位移

二、CSS3 幀動畫

animation

幀動畫是通過一幀一幀的畫面按照固定順序和速度播放，如電影膠片�？赏ㄟ^設(shè)置多個節(jié)點(diǎn)來精確控制一個或一組動畫，常用來實(shí)現(xiàn)復(fù)雜的動畫效果。

語法：

第一步：先用@keyframes 制定運(yùn)動動畫的軌跡規(guī)則

@keyframes myMove{

from{初始狀態(tài)屬性}

to{結(jié)束狀態(tài)屬性}

}

或

@keyframes myMove{

0%{初始狀態(tài)屬性}

100%{結(jié)束狀態(tài)屬性}

}(中間再可以添加關(guān)鍵幀)

備注：mymove是給動畫起的名字

文章“【W(wǎng)eb前端基礎(chǔ)知識】過渡動畫和關(guān)鍵幀動畫使用和區(qū)別”已幫助 人

>>本文地址：http://m.hqfphsz.com/zhuanye/2019/48238.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有，未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學(xué)歷

3 您更想做哪個方向的工作？

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計(jì)算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運(yùn)營全域電商運(yùn)營
  • 軟件測試軟件測試
  • 室內(nèi)設(shè)計(jì)室內(nèi)設(shè)計(jì)
  • 平面設(shè)計(jì)平面設(shè)計(jì)
  • 電商設(shè)計(jì)電商設(shè)計(jì)
  • 網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì)
  • 全鏈路UI/UE設(shè)計(jì)UI設(shè)計(jì)
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡(luò)安全網(wǎng)絡(luò)安全
  • 新媒體與短視頻運(yùn)營新媒體
  • 直播帶貨直播帶貨
  • 智能機(jī)器人軟件開發(fā)智能機(jī)器人
 

快速通道fast track

近期開班時間TIME