編碼的世界 / 優質文選 / 生涯

CSS3（三）Animation 入門詳解

2022年3月30日
-   

Animation

前言


個人github: https://github.com/robbiemie 歡迎star&follow ~
好的前端工程師，會更注重用戶的體驗和交互。那麼動畫就是將我們的靜態頁面，變成具有靈動性，為我們的界面添加個性的一種方式。
下面是七喜的官方主頁，它就是很好的富交互樣例。鼠標移動到導航欄，就會播放多種動效，給用戶一種酷炫的體驗。我覺得用戶體驗，才是前端工程師更加關注的問題，而不是一味追求Javascript的編碼技能。
七喜官方網站
個人網站
Github 源碼(歡迎Fork~~)

Animation 組成


CSS3 Animation 是由三部分組成。
1.關鍵幀(@keyframes)
  • 關鍵幀(keyframes) - 定義動畫在不同階段的狀態。
  • 動畫屬性(properties) - 決定動畫的播放時長，播放次數，以及用何種函數式去播放動畫等。（可以類比音視頻播放器）
  • css屬性 - 就是css元素不同關鍵幀下的狀態。

下面我們來看一個例子。 創建了一個@keyframes命名為dropdown。
  • 關鍵幀主要分為3個階段，0%、50%、100%。
  • 動畫播放時長為6s、循環播放(infinite)、以linear方式進行播放。
  • 修改的元素屬性為margin-top

.list div:first-child {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
 0% { margin-top: 0px;}
 /** 暫停效果 */
 10% { margin-top: 0px;}
 50% { margin-top: -100px;}
 60% { margin-top: -100px;}
 90% { margin-top: -200px;}
 100% { margin-top: -200px;}
}


查看源碼 MDN參考網站
需要注意！當屬性的個數不確定時：
當我們在定義不同關鍵幀，元素屬性的個數是一個變化的值。 如果一個關鍵幀的屬性，沒有出現在其他關鍵幀的時候，那麼這些屬性將會使用上一幀的默認值。 區別在於，缺省之後的漸變效果是不會出現的。比如下面兩種寫法，
 @keyframes dropdown {
 0% { top: 0; }
 30% { top: 300px; }
 50% { top: 150px; }
 70% { top: 300px; }
 80% { top: 0px; left:-200px;}
 100% { top: 0px; }
 }


 @keyframes dropdown {
 0% { top: 0; left:0px;}
 30% { top: 300px; left:0px;}
 50% { top: 150px; left:0px;}
 70% { top: 300px; left:0px;}
 80% { top: 0px; left:-200px;}
 100% { top: 0px; left:0px;}
 }


語法
@keyframes keyframes-name { [ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]* } keyframes-name 幀列表的名稱。 名稱必須符合 CSS 語法中對標識符的定義。 from 等效於 0%. to 等效於 100%.
2.動畫屬性
動畫屬性可以理解為播放器的相關功能，一個最基本的播放器應該具有：播放/暫停、播放時長、播放順序(逆序/正序/交替播放)、循環次數等。 主要也分為兩大點：
  • 指定播放的元素


動畫源碼
簡寫屬性形式:
animation: [animation-name] [animation-duration] // 動畫的名稱、持續時間 [animation-timing-function][animation-delay] // 關於時間的函數(properties/t)、延遲時間 [animation-iteration-count] [animation-direction] // 播放次數、播放順序 [animation-fill-mode] [animation-play-state]; // 播放前或停止後設置相應樣式、控制動畫運行或暫停
MDN參考文檔
1.時間函數（animation-timing-function）
動畫源碼 默認值，如果沒有顯示寫調用的函數，則默認為ease。
2.動畫方向（animation-direction）
animation-direction屬性表示CSS動畫是否反向播放。 可選配置參數為:
single-animation-direction = normal | reverse | alternate | alternate-reverse
  • animation-direction: normal 正序播放
  • animation-direction: reverse 倒序播放
  • animation-direction: alternate 交替播放
  • animation-direction: alternate-reverse 反向交替播放
  • animation-direction: normal, reverse
  • animation-direction: alternate, reverse, normal


動畫源碼 MDN文檔
3.動畫延遲（animation-delay）
animation-delay屬性定義動畫是從何時開始播放，即動畫應用在元素上的到動畫開始的這段時間的長度。 默認值0s，表示動畫在該元素上後立即開始執行。 該值以秒(s)或者毫秒(ms)為單位。
4.動畫迭代次數（animation-iteration-count）
animation-iteration-count該屬性就是定義我們的動畫播放的次數。次數可以是1次或者無限循環。 默認值只播放一次。
single-animation-iteration-count = infinite | number
5.動畫填充模式（animation-fill-mode）
animation-fill-mode是指給定動畫播放前後應用元素的樣式。
single-animation-fill-mode = **none **| **forwards **| **backwards **| both
  • animation-fill-mode: none 動畫執行前後不改變任何樣式
  • animation-fill-mode: forwards 保持目標動畫最後一幀的樣式
  • animation-fill-mode: backwards 保持目標動畫第一幀的樣式
  • animation-fill-mode: both 動畫將會執行 forwards 和 backwards 執行的動作。

6.動畫播放狀態（animation-timing-function）
animation-play-state: 定義動畫是否運行或者暫停。可以確定查詢它來確定動畫是否運行。 默認值為running single-animation-timing-function = running | paused
  • running 動畫正常播放
  • paused 動畫暫停播放

個人github: https://github.com/robbiemie 歡迎star&follow ~
相關鏈接
個人網站 Github 源碼
SVG動畫實踐
動畫實踐
分享一些CSS3動效網站:
Animation.css 一個很全的CSS3的動效庫，可以嘗試看看源碼進行學習。 CreateJS 裏面的特效做得也很不錯，有很多酷炫的樣例。 國外css3網頁 布局很優雅的網站 USAToday 也是一個很酷炫的國外網站 peekabeat 很清爽的界面 heartbeat 交互很棒的網站 dances 貌似是交響樂的網站主頁 reative 很有時代感的網站 animation 在線animation編輯器

熱門文章