400-650-7353

精品課程

您所在的位置:首頁 > IT干貨資料 > web前端 > 過渡動畫和關鍵幀動畫

過渡動畫和關鍵幀動畫

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

一、CSS3 過渡

transition

css3的transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發,并圓滑地以動畫效果改變CSS的屬性值

transition-property:檢索或設置對象中的參與過渡的屬性

transition-duration:檢索或設置對象過渡的持續時間

transition-delay:檢索或設置對象延遲過渡的時間

transition-timing-function:檢索或設置對象中過渡的動畫類型

貝塞爾曲線:

屬性值:cubic-bezier()

貝塞爾曲線網址:http://cubic-bezier.com/

簡寫:transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型

最簡寫:transition:運動時間s/ms

案例:懸停div,讓p標簽沿著x方向發生位移

二、CSS3 幀動畫

animation

幀動畫是通過一幀一幀的畫面按照固定順序和速度播放,如電影膠片?赏ㄟ^設置多個節點來精確控制一個或一組動畫,常用來實現復雜的動畫效果。

語法:

第一步:先用@keyframes 制定運動動畫的軌跡規則

@keyframes myMove{

from{初始狀態屬性}

to{結束狀態屬性}

}

@keyframes myMove{

0%{初始狀態屬性}

100%{結束狀態屬性}

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

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

>>本文地址:
注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

下一篇:CSS3 2D 變換

上一篇:clear使用方法

申請免費試聽課程
課程干貨資料
 

相關推薦

從入門到進階
免費干貨資料

進群即領(備注:500G)
進群即領
(備注:500G)
 
 
青海省11选五开奖结果