Font Awesome Animationの使い方

WebDesign

Font Awesome Animationは、Font Awesomeと合わせて使用することでアイコンを簡単にアニメーション表示させることができるCSSライブラリです。
Font Awesome Animationのサイト

Font Awesome自体の使い方については、下の記事で紹介していますので、興味のある方はこちらも見てみてください。

Font Awesome Animationを使用する準備

Font Awesome Animationを利用するためには、まずFont Awesomeを読み込めるようにしておく必要があります。
その上でFont Awesome Animationを利用する準備として、Font Awesome AnimationのCSSファイルをダウンロードしてサイトに設置する方法と、CDNを利用する方法とがあります。
以下でそれぞれについて紹介していきます。

ダウンロードしてサイトに設置する方法

Font Awesome AnimationのCSSファイルをダウンロードする方法として、ここではGitHubのページからダウンロードして読み込ませる方法を紹介します。
Font Awesome AnimationのGitHubページを開きます。(Font Awesome Animationのページの右上にもリンクがあります。)
Font Awesome AnimationのGitHubページは下の図のようになっているので、緑色の「Clone or download」ボタンから「Download ZIP」をクリックするとzipファイルがダウンロードされます。

ダウンロードされたzipファイルを展開すると、「dist」というフォルダがありますので、その中の「font-awesome-animation.min.css」というファイルをサイトに設置します。
あとは、headタグ内に下のような記述をしてFont Awesome AnimationのCSSファイルを読み込ませてください。(ファイルへのパスは適宜変更してください。)

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

CDNを利用する方法

Font Awesome Animationのページで紹介されているものではありませんが、一応利用できるCDNもありますので紹介しておきます。
cdnjs:font-awesome-animation

Font Awesome Animationの使い方

Font Awesome Animationの使い方としては、Font Awesomeと同様にHTMLファイルのclass属性にいろいろな要素を指定するだけでアイコンをアニメーション表示させることができます。

アニメーションの種類

Font Awesome Animationで利用できるアニメーションの種類を紹介します。

アニメーション htmlコード
<i class="fas fa-wrench faa-wrench animated"></i>
<i class="fas fa-bell faa-ring animated"></i>
<i class="fas fa-envelope faa-horizontal animated"></i>
<i class="fas fa-thumbs-up faa-vertical animated"></i>
<i class="fas fa-exclamation-triangle faa-flash animated"></i>
<i class="fas fa-thumbs-up faa-bounce animated"></i>
<i class="fas fa-redo-alt faa-spin animated"></i>
<i class="fas fa-dove faa-float animated"></i>
<i class="fas fa-heart faa-pulse animated"></i>
<i class="fas fa-envelope faa-shake animated"></i>
<i class="fas fa-trophy faa-tada animated"></i>
<i class="fas fa-plane faa-passing animated"></i>
<i class="fas fa-backward faa-passing-reverse animated"></i>
<i class="fab fa-sith faa-burst animated"></i>
<i class="fas fa-poo faa-falling animated"></i>
<i class="fas fa-hand-holding-heart faa-rising animated"></i>

hover時にFont Awesome Animationを利用する

Font Awesome Animationを利用することで、CSSでの「:hover」の記述がなくてもhover時にアニメーション表示させることができます。
アイコンにhoverした時と、アイコンの親要素にhoverした時にFont Awesome Animationを利用する方法を紹介します。

アイコンにhover

アイコン自体にhoverしたときにアニメーション表示させたいときには、アイコンのclass属性に指定していた「animated」の代わりに「animated-hover」を指定します。

See the Pen
BaorXOy
by saku (@web-saku)
on CodePen.

アイコンの親要素にhover

アイコンの親要素にhoverしたときにアニメーション表示させたいときには、親要素のclass属性に「faa-parent」と「animated-hover」を指定し、アイコンのclass属性の「animated」または「animated-hover」の指定を外します。
下の例では、親要素のaタグのclass属性に「faa-parent」と「animated-hover」を指定しており、アイコンのiタグのclass属性には「animated」または「animated-hover」の指定はありません。

See the Pen
WNQzjBK
by saku (@web-saku)
on CodePen.

アニメーションのスピードを変更

アイコンのclass属性に、「faa-fast」を指定することでアニメーションのスピードを速くしたり、「faa-slow」を指定することでアニメーションのスピードを遅くしたりすることができます。

See the Pen
KKdxoqX
by saku (@web-saku)
on CodePen.

関連記事

コメントを残す





このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください