CSS筆記:CSS動畫的使用方式
前端的CSS動畫一直沒有去使用過,今天剛好有個小機會需要利用CSS的動畫功能,因此就來小研究一下語法後,將其記錄在這裡。
利用CSS動畫,做出搖晃的鈴鐺
其實也是利用關鍵影格的概念來進行,這個以前有用過Flash甚至是更早以前的Director,都是用這個概念在運作,只不過CSS基於先天的限制,因此只能採用完整播放一次動畫的百分比來進行關鍵點的設定,若有這方面觀念的朋友,應該都可以馬上上手。
設定CSS
<style>
//定義關鍵影格當下應進行的屬性,或應該到位的位址
@keyframes bellShake {
0% {transform: rotate(-30deg);}
//如果你喜歡的話,可以在這之中的關鍵點(例如50%),繼續制定你的相關屬性
100% {transform: rotate(30deg);}
}
//定義類別
.shake {
animation-name: bellShake; //必須連動到關鍵影格的名稱
animation-duration: 1s; //動畫期間秒數
animation-direction: alternate; //動畫方向(這裡設定成完成後逆運動回來)
animation-iteration-count: infinite; //動畫重複次數
}
</style>
套用端語法如下,基本上就是把「shake」這個CSS類別名稱加入即可。這裡我是採用FontAwesome的解決方案。
<i class="fa-solid fa-bell shake"></i>
運行範例如下
搖落去!搖落去!
缺點是,這個鈴鐺動畫只有用到很基本的0%-100%的角度循環轉換,所以搖起來的過程並不是很柔和(盪過去快返回慢),如果要看到比較平順的動畫可以參考下方連結。
相關連結
- CSS筆記:CSS動畫的使用方式
- CSS筆記:讓SVG的鈴鐺圖示搖擺起來(swing)
- font-awesome-animation裡面有將很多日常會用到的動畫整理在裡面,如果有需要可以直接引入。
- CSS Shake Animation裡面有很多震動類型的動畫,有需要的人也可以參考。