讓fontawesome或SVG的鈴鐺圖示搖擺起來(swing)

臨時有一個需求需要讓fontawesome圖示左右擺動起來,但因為fontawesome寫好的動畫範本只有簡單的旋轉,因此把解決辦法筆記在此供日後快速參考取得。

通知震動鈴鐺

因為現在這個網站整體上並沒有引入fontawesome,所以我直接去fontawesome網站上把SVG資料拿下來。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M256 32V51.2C329 66.03 384 130.6 384 208V226.8C384 273.9 401.3 319.2 432.5 354.4L439.9 362.7C448.3 372.2 450.4 385.6 445.2 397.1C440 408.6 428.6 416 416 416H32C19.4 416 7.971 408.6 2.809 397.1C-2.353 385.6-.2883 372.2 8.084 362.7L15.5 354.4C46.74 319.2 64 273.9 64 226.8V208C64 130.6 118.1 66.03 192 51.2V32C192 14.33 206.3 0 224 0C241.7 0 256 14.33 256 32H256zM224 512C207 512 190.7 505.3 178.7 493.3C166.7 481.3 160 464.1 160 448H288C288 464.1 281.3 481.3 269.3 493.3C257.3 505.3 240.1 512 224 512z"/></svg>

因為直接把複製下來的SVG顯示出來太大,因此我在這SVG XML裡面加上WIDTH屬性把他稍微縮小一下,如下圖:

接下來添加兩個CSS組態檔案:

.swing {
  animation: custom-swing 3s;
  -webkit-animation: custom-swing 3s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
   8% { transform: rotate3d(0, 0, 1, 20deg); }
  16% { transform: rotate3d(0, 0, 1, -15deg); }
  24% { transform: rotate3d(0, 0, 1, 10deg); }
  32% { transform: rotate3d(0, 0, 1, -5deg); }
  40% { transform: rotate3d(0, 0, 1, 0deg); }
}

然後再SVG XML CLASS屬性裡面套用這個swing就可以啦!

如果嫌動畫太柔和,可以加快CSS的animation秒數或者keyframes的百分率,例如下列:

.swing {
  animation: custom-swing 2s;
  -webkit-animation: custom-swing 2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes custom-swing {
   2% { transform: rotate3d(0, 0, 1, 20deg); }
   4% { transform: rotate3d(0, 0, 1, -15deg); }
   6% { transform: rotate3d(0, 0, 1, 10deg); }
   8% { transform: rotate3d(0, 0, 1, -5deg); }
  10% { transform: rotate3d(0, 0, 1, 0deg); }
}

相關連結

有一個叫做font-awesome-animation的GitHub,裡面有將很多日常會用到的動畫整理在裡面,如果有需要可以直接引入這個CSS比較快。

Fontawesome Icon Bell Swing Animation