iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 7

認識 CSS animation 與他的孩子們 (二)

animation 屬性包含了多個子屬性(sub-properties),name和duration為必要值,另外還有其他項目可以依照需求進行設定:

animation-name (必要值)
這邊就是呼喚animation好夥伴@keyframes的地方! 把keyframes後面的自訂名字放在這裡即可使用,若有多個keyframes要設定在同一個網頁元件中,使用逗點隔開即可。

animation-duration (必要值)
動畫的靈魂「時間」設定的地方,以時間作為單位,常用秒s或毫秒ms。

animation-timing-function
定義變化的速率,預設值為linear(平均速率變化),另外可以使用step、cubic-bezier和定義好的ease/ease-in/ease-out/ease-in-out。
step是個有趣的數值,可以讓播放產生斷點,一步驟一步驟進行播放;如果希望動態是以較順暢的方式,可以以以定義好的ease/ease-in/ease-out/ease-in-out來進行設定,這些數值會比linear更加柔和,速度感也更加流暢。若希望有更客製化的數值來進行操作,可以利用cubic-bezier,建立自己的貝茲曲線去控制動畫的速率變化。

animation-delay
這邊也是與時間相關,設定網頁元件讀取完畢後與動畫開始的間隔時間,可以產生延後開始的效果。單位使用秒s或毫秒ms即可。

animation-iteration-count
設定動畫的重複次數,使用「infinite」即可達成重複播放。

animation-direction
定義動畫播放完畢後是否需反向播放。共有normal、reverse、alternate、alternate-reverse四個值可以設定。normal是順向播放,reverse則是反向,而alternate第一次是以順向的方式播放,第二次則以反向,alternate-reverse則相反。
可以發現若要設定alternate或alternate-reverse,需要與上方的iteration-count搭配使用,定義一次以上的播放次數,這裡的設定才會產生「第二次與第一次為不同方向播放」的效果。

animation-fill-mode
定義元素在動畫播放外(開始前及結束後)的狀態。共有none、forwards、backwards、both四個值可以設定。
預設值為none,也就是說在開始之前與播放結束後的狀態沒有特別設定,會依照動畫之外的css相關設定作呈現。而forwards是停留在keyframes最後to/100%的狀態,backwards則在最一開始from/0%的狀態;而both就會是在開始前以最一開始0%狀態為主、結束後就以結束100%狀態呈現。

animation-play-state
控制動畫的播放狀態。有 pause 和 running 兩個值,預設為running。較常使用於播放控制元件中。


最後複習一下,一起寫在 animation 長這樣子:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

備註:name 和 duration 為必要值。


上一篇
認識 CSS animation 與他的孩子們 (一)
下一篇
讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (一)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言