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裡面有很多震動類型的動畫，有需要的人也可以參考。

CSS Animate NonjQuery Bootstrap FontAwesome Bell Shake Rotate