すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

アイコンフォントFont Awesomeをアニメーションさせる方法





【無料で簡単!】アイコンフォントFont Awesomeの導入方法と使い方【初心者でも安心】
紹介したアイコンフォントをアニメーションさせてみましょう。

動きが加わることで視覚的に目を引く感じになります。

やり方はほとんど同じなのでFont Awesomeの導入が済んでいれば
すぐにできますよ。

Font Awesomeをアニメーションさせるための下準備

Font Awesomeのコードと同様に
以下のコードを<head></head>の部分に貼り付けます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css" type="text/css" media="all" />

はてなブログの場合は設定→詳細設定と進み、
要素にメタデータを追加
のところです。

Font Awesomeをまだ導入していない場合は以下のコードもheadに追加してください。

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

Font Awesomeをアニメーションさせる

Font Awesomeのコードとアニメーションのコードをheadに追加したら
後はFont Awesomeのときと同じように設定していきます。

アニメーションのコードはFont Awesomeのアイコンコードに追加するだけなので
一覧にしてみました。

対応するアニメーションのコードを使用したいアイコンのコードに追加してください。

コード
ねじる faa-wrench animated
震える faa-ring animated
横に揺れる faa-horizontal animated
縦に揺れる faa-vertical animated
点滅 faa-flash animated
上に跳ねる faa-bounce animated
回転 faa-spin animated
浮遊する faa-float animated
脈打つ faa-pulse animated
揺れる faa-shake animated
飛び出す faa-tada animated
左から右へ移動 faa-passing animated
右から左へ移動 faa-passing-reverse animated
破裂する faa-burst animated
落ちる faa-falling animated

さらにfaa-fast、faa-slowを追加することで
アニメーションの速度を変更することができます。

faa-fast : アニメーション速度を速くする
faa-slow : アニメーション速度を遅くする

faa-fast
faa-slow

マウスオーバー時にホバーさせる

animatedをanimated-hoverにすることで
マウスオーバー時にホバーさせることができます。


<i class="far fa-grin-beam fa-5x faa-wrench animated-hover"></i>

クラス名faa-parentanimated-hoverを付与し、
その中にアイコンのコードを挿入することでアイコンをリンクにして
マウスオーバー時にホバーさせることができます。


👈クリックするとトップページ

<a href="リンクのURL" class="faa-parent animated-hover">
  <i class="far fa-grin-beam faa-wrench" style="font-size: 3em;"></i>
</a>

まとめ

アニメーション用のコードをheadに追加
表示用のコードにアニメーション用のコードを追加
animated-hoverにすることでマウスオーバー時にホバー
faa-parentを使うことでリンクにすることも可能

Font Awesomeをアニメーションさせるコードをheadに追加しておけば
後はFont Awesomeを表示するコードに追加するだけでいいので
基本的なものなら簡単にアニメーションさせることができます。

動きがあった方が見た目もいいのでどんどん使っちゃいましょう!