iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

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

CSS就可以!animation 與他的好夥伴 @keyframes

如果說HTML是網頁開發的第一堂課,CSS差不多就會再第二堂課出現了,好消息是,只要用第二堂學到的語法,就可以製作 Web Motion 啦!
而且若真的要細談效能的話,CSS這邊能把效果寫出來、符合開發情境與需求 (瀏覽器支援度問題等),那基本上就使用CSS這邊寫就是相當合適的選擇。

接下來就直接進入正題
CSS動畫基本架構:animation 與他的好夥伴 @keyframes

.my-div{
animation: my-animation 3s;
}
@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

第一步、keyframes給個名字,定義至少兩個關鍵影格狀態
keyframe用@標籤開頭,後面帶上一個命名,裡面設定動畫漸變過程中的「關鍵影格」,關鍵影格之間有狀態數值的差異,加上時間即可構成「動」的變化。

@keyframes my-animation{
  0%{
      opacity:0;
    }
  100%{
      opacity:1;
    }
}

這邊至少要有起點與終點的兩個狀態,當然也可以加上速率的差異,例如上方的範例,從不透明度為0開始 (就是完全透明的狀態),到終點是完全不透明,如果是沒有加上速度相關控制,在最中間的50%時,opacity也會來到0.5,如果希望是帶有先快後慢的效果,可以在50%的時候增加設定(當然可以把opacity:0.5設定在50%之前也可以,程式寫法很自由的~)

@keyframes my-animation-two{
  0%{
      opacity:0;
    }
    50%{
      opacity:0.8;  
    }
  100%{
      opacity:1;
    }
}

第二步、把keyframes動畫利用animation加到網頁裡
利用「animation」即可把剛剛定義好的 keyframes 加進指定的網頁元件中,如之前提到「時間」是Motion的靈魂元素,因此這邊除了需要放入keyframes名字,也須把持續多久的時間加進:

.my-div{
animation: my-animation 3s;
}

keyframes可以設定很多個,若希望在使用兩個keyframes特效,可以用逗號隔開:

.my-div{
animation: my-animation 3s, my-animation-two 3s;
}

上一篇
Motion 效果基本項目
下一篇
認識 CSS animation 與他的孩子們 (一)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言