麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > transition過渡動畫的自述

transition過渡動畫的自述

來源:千鋒教育
發布人:syq
時間: 2022-08-11 14:24:00 1660199040

  Hi,大家好!我是transition,經常有小伙伴把我和隔壁animation搞混,下面我就好好的介紹一下自己,讓大家能明白transition過渡動畫到底是干啥的。

ransition過渡動畫

  看看我身上的屬性吧:

  大家總是叫我transition,其實我有四個重要的部分組成,下面一一聽我介紹:

  1. transition-property:需要參與過渡的屬性,例如:width、height、background...

  2. transition-duration:過渡動畫的持續時間,單位秒s或毫秒ms

  3. transition-delay:延遲過渡的時間,單位秒s或毫秒ms

  4. transition-timing-function:動畫過渡的動畫類型

  我可以以屬性的形式被定義

11

12

  效果圖

  效果出來了我是不是很厲害?可是上面的我由于屬性太多有點不招新手同學待見 o(╥﹏╥)o

  其實平時的我是下面這種形式出現在代碼中的:

13

  這樣瘦身的我是不是就很可愛了呢?

  下面這樣寫,效果一樣喲

14

  我還可以更厲害呢!

  通常情況下,我會讓一些元素在變化時產生動畫效果,但是我得和好搭檔hover(鼠標懸停)一起干活,先來看一段代碼:

15

  ![](https://vnode-1253495453.cos.ap-nanjing.myqcloud.com/a.gif)

16

  那大家明白這種寫法嗎?試一試?

  這里就是應用過渡動畫實現的效果,多個屬性是依次執行動畫效果的,其實就是巧妙應用了過渡延遲屬性,讓上一個屬性執行完了再接著下面一個,是不是很有趣鴨。

  看我的絕技 transition-timing-function

  transition-timing-function是動畫運動的曲線,它一共有6個值。

  · ease - 指定一個緩慢開始,然后快速,然后慢慢結束的過渡效果(這是默認值)

  · linear - 指定從開始到結束以相同速度的轉換效果

  · ease-in - 指定緩慢啟動的過渡效果

  · ease-out - 指定一個緩慢結束的過渡效果

  · ease-in-out - 指定開始和結束緩慢的過渡效果

  · cubic-bezier(n,n,n,n) - 在一個三次貝塞爾函數中定義您自己的值

17

  看看我都能干什么吧!復雜一點的例子

  下面我們再來做一個更好看的效果,類似于彈鋼琴的效果,代碼如下:

  html:

18

  css:

19

  請看效果圖: 

20

  這個效果還不錯吧,運用了過渡動畫結合了定位相關的綜合應用。最后再次提醒,你想要用我做過渡動畫,一定要結合事件觸發哦,最常用的方式就是鼠標的hover。

  今天給大家介紹了transition過渡動畫,相信大家都知道我是干啥工作的了,下次再給大家介紹我隔壁的animation。更多關于“前端培訓”的問題,歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學,課程大綱緊跟企業需求,更科學更嚴謹,每年培養泛IT人才近2萬人。不論你是零基礎還是想提升,都可以找到適合的班型,千鋒教育隨時歡迎你來試聽。

  注:本文部分文字和圖片來源于網絡,如有侵權,請聯系刪除。版權歸原作者所有!

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 老司机午夜在线视频免费| 国产砖码砖专区| 乱妇伦交| 爱爱帝国亚洲一区二区三区| 黄网站色视频免费观看| 久久久国产99久久国产久| 蜜柚免费视频下载| 男人桶女人视频不要下载| 波多野结衣女同| 亚洲欧美成人综合久久久| 欧美妇乱xxxxx视频| 把她抵在洗手台挺进撞击视频| 又粗又大又爽又长又紧又水| 三级极精品电影| 久久只这里是精品66| 再深点灬舒服灬太大了添学长| 国产孕妇做受视频在线观看| 中文字幕按摩| 护士在办公室里被躁视频| 黄色片三| 国产高清免费在线观看| 免费看欧美一级特黄α大片| 国产亚洲精品一品区99热| 久久久久久久久国产| aaa一级特黄| bwbwbwbwbwbw精彩| 国产丰满麻豆videossexhd| 午夜电影一区二区| 麻豆91在线视频| 再灬再灬再灬深一点舒服| 波多野结衣1区| 大香伊人久久精品一区二区| 3d动漫精品一区二区三区| 2021果冻传媒剧情在线观看| 国产精品久久久久久影视| 蜜桃成熟时无删减手机在线观看| 韩国公和熄三级在线观看| 久久精品人人做人人爽| 波多野结衣动态图| 干妞网在线观看| 性欧美高清come|