Font Awesome Animationを使ってみる

公開日: 2019年08月26日　更新日: 2019年09月17日

Font Awesome Animationとは何か？

Font Awesome Animationとは、WebフォントであるFont Awesomeにアニメーション効果を与えるスタイルシートです。Font Awesomeの使える環境が必要なので、フォントを導入されていない方は、先にそちらをご覧ください。

Font Awesomeを使ってみる

まずはダウンロード

まずは、Font Awesome Animationのサイトを開きます。

http://l-lin.github.io/font-awesome-animation/

ここでCSSファイルをダウンロードします。
特に理由がなければ Minified CSSの方を選択し、「名前を付けてリンク先を保存」します。

ダウンロードできたら今度はアップロードです。サーバの適切な場所にCSSファイルを置きます。

<link rel="stylesheet" href="/font-awesome-animation.min.css">

これを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。

使ってみる

<i class="fas fa-wrench faa-wrench animated"></i>

このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。

On DOM load

ずっと動いてます。ここでのコードはこうなってます。

<i class="fas fa-wrench faa-wrench animated fa-fw fa-lg"></i>
faa-wrench animated

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

On hover

アイコンにカーソルを置いた時に動きます。ここでのコードはこうなっています。

<i class="fas fa-wrench faa-wrench animated-hover fa-fw fa-lg"></i>
faa-wrench animated-hover

faa-wrench animated-hover

faa-ring animated-hover

faa-horizontal animated-hover

faa-vertical animated-hover

faa-flash animated-hover

faa-bounce animated-hover

faa-spin animated-hover

faa-float animated-hover

faa-pulse animated-hover

faa-shake animated-hover

faa-tada animated-hover

faa-passing animated-hover

faa-passing-reverse animated-hover

faa-burst animated-hover

faa-falling animated-hover

On parent hover

アイコンの親要素にカーソルを置いた時に動きます。ここでのコードはこうなっています。

<style>
span:hover {
    color: red;
}
</style>

<span class="faa-parent animated-hover">
  <i class="fas fa-wrench faa-wrench fa-fw fa-lg"></i>
  faa-wrench
</span>

faa-wrench

faa-ring

faa-horizontal

faa-vertical

faa-flash

faa-bounce

faa-spin

faa-float

faa-pulse

faa-shake

faa-tada

faa-passing

faa-passing-reverse

faa-burst

faa-falling

faa-fast と faa-slow

faa-fast

これが通常の速度

faa-slow

まとめ

ワンポイントに使うと効果的でしょうね。多用されると、うーん。

[Top]

　