FontAwesomeのアイコンで動きのあるものを見つけたんだけど、あれってどうやってやってるの？
あれはFont AwesomeにCSSコードを追加することでできるよ。せっかくだからやってみよう！
目次
Font Awesome。アイコンに様々なアニメーションをつける
Font Awesome Animationという専用のスタイルシートを読み込めば、アイコンに多くのアニメーションをつけることができるようになります。
CDN読み込みによる下準備
Font AwesomeのCSSをCDNで読み込んだのと同様、今回のアニメーション用のCSSもCDNで読み込みます。
＜head＞内の以下のように記述します。
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" /> |
動きのクラスタグを追加する
動きを加える際には、以下のように特定のclass名を追加します。
|
1 |
<i class="fab fa-twitter アニメーションのclass名"></i> |
試しにfaa-wrench animatedという動きのタグを追加してみます。
|
1 |
<i class="fab fa-twitter faa-wrench animated"></i> |
例
揺れるような動きがついたかと思われます。
Font Awesomeアニメーション一覧
アニメーションのクラスタグを変えるだけで様々なアニメーションを付けることが可能です。
ここでは、アニメーションの種類を紹介します。
| 動き | class名 | コード例 |
|---|---|---|
| レンチ風 | faa-wrench animated |
<i class="fab fa-twitter faa-wrench animated"></i> |
| ブルブル | faa-ring animated |
<i class="fas fa-bus faa-ring animated" ></i> |
| 横揺れ | faa-horizontal animated |
<i class="fas fa-male faa-horizontal animated"></i> |
| 縦揺れ | faa-vertical animated |
<i class="fas fa-futbol-o faa-vertical animated"></i> |
| 点滅 | faa-flash animated |
<i class="fas fa-star faa-flash animated"></i> |
| 跳ね | faa-bounce animated |
<i class="fas fa-music faa-bounce animated"></i> |
| スピン | faa-spin animated |
<i class="fas fa-refresh faa-spin animated"></i> |
| 浮遊 | faa-float animated |
<i class="fas fa-ship faa-float animated"></i> |
| パルス | faa-pulse animated |
<i class="fas fa-heart faa-pulse animated"></i> |
| シェイク | faa-shake animated |
<i class="fas fa-facebook faa-shake animated"></i> |
| ジャジャーン | faa-tada animated |
<i class="fas fa-plane faa-tada animated"></i> |
| 通過 | faa-passing animated |
<i class="fas fa-bicycle faa-passing animated"></i> |
| バック | faa-passing-reverse animated |
<i class="fas fa-bicycle faa-passing-reverse animated"></i> |
| バースト | faa-burst animated |
<i class="fas fa-bomb faa-burst animated"></i> |
アイコンへのマウスホバー時のみ動かす
class名のanimatedをanimated-hoverに書き換えることで、アイコンにカーソルをのせたとき（hover時）のみアニメーションが有効にすることも可能です。
例
アイコンに動きを持たせることで、サイトに華を添えることができます。活用の幅はかなり広いと思われます。
