Font Awesomeのアニメーションの設定方法

Font Awesome を使用すると Web ページにアイコンを表示させることができます。このアイコンについて、色やサイズなどのカスタマイズに加えて、ジャンプしたり回転したりといった色々なアニメーションを設定することができます。この記事では Font Awesome のアイコンに対するアニメーションの設定方法について詳しく解説します。

※ Font Awesome の基本的な使い方については「Font Awesomeの使い方 ～初心者の方向けの完全ガイド～」を参照されてください。

(Last modified: 2025-02-16)

Beatの設定（拡大・縮小）

Beat はアイコンのサイズが大きくなったあとまた元のサイズに戻るといった動作を繰り返します。 Beat を設定する場合は fa-beat クラスを記述します。

Beat については次のプロパティが用意されています。

プロパティ	意味
--fa-beat-scale	アイコンが拡大縮小される最大値

最大値は 1 の値が基準となり 1 を指定すると変化しません。 1 よりも大きな数値を指定するとアイコンが元のサイズよりも大きくなるように拡大します。 0 から 1 の数値を指定するとアイコンが元のサイズより小さくなるように縮小します。

次の例では 3 倍および 1/2 倍になるように設定しています。

Fadeの設定（透明・非透明）

Fade はアイコンが非透明から透明になり、また非透明に戻るという動作を繰り返します。 Fade を設定する場合は fa-fade クラスを記述します。

Fade については次のプロパティが用意されています。

プロパティ	意味
--fa-fade-opacity	アイコンの不透明度の最低値

不透明度の最低値を 0 から 1 の間の数値で指定してください。 1 を指定した場合は何も変換しません。 0 を指定した場合は不透明な状態から完全な透明な状態に変化します。

次の例では 0.5 および 0 になるように設定しています。

Beat-Fadeの設定

Beat-Fade は Beat と Fade を組み合わせたもので、アイコンのサイズが大きくなったあとまた元のサイズに戻ると動作と、非透明から透明になり、また非透明になるという動作を同時に繰り返します。 Beat-Fade を設定する場合は fa-beat-fade クラスを記述します。

Beat-Fade については次のプロパティが用意されています。

プロパティ	意味
--fa-beat-fade-scale	アイコンが拡大縮小される最大値
--fa-beat-fade-opacity	アイコンの不透明度の最低値

--fa-beat-fade-scale プロパティに最大値は 1 の値が基準となり 1 を指定すると変化しません。 1 よりも大きな数値を指定するとアイコンが元のサイズよりも大きくなるように拡大します。 0 から 1 の数値を指定するとアイコンが元のサイズより小さくなるように縮小します。

--fa-beat-fade-opacity プロパティに不透明度の最低値を 0 から 1 の間の数値で指定してください。 1 を指定した場合は何も変換しません。 0 を指定した場合は不透明な状態から完全な透明な状態に変化します。

例えば不透明度の最低値を 0.5 、拡大縮小の最大値を 3 に設定する場合は次のように記述します。

Bounceの設定（ジャンプ）

Bounce はアイコンがジャンプするような動作を繰り返します。 Bounce を設定する場合は fa-bounce クラスを記述します。

Bounce については次のプロパティが用意されています。

プロパティ	意味
--fa-bounce-rebound	ジャンプしたあと着地時の反発量
--fa-bounce-height	ジャンプする最大の高さ
--fa-bounce-start-scale-x	ジャンプ開始時の水平方向の歪み
--fa-bounce-start-scale-y	ジャンプ開始時の垂直方向の歪み
--fa-bounce-jump-scale-x	ジャンプの頂点で水平方向の歪み
--fa-bounce-jump-scale-y	ジャンプの頂点で垂直方向の歪み
--fa-bounce-land-scale-x	着地時の水平方向の歪み
--fa-bounce-land-scale-y	着地時の垂直方向の歪み

順番に確認していきます。

--fa-bounce-rebound

--fa-bounce-rebound プロパティは、ジャンプしたあとに着地したときに、その反動で小さくジャンプする量を指定します。単位 px で指定し、正の値を指定すると下の方向に対する値となり、負の値を指定すると上の方向に対する値となります。

例えば反発量の高さを、-5px、 -10px 、 -20px にそれぞれ設定する場合は次のように記述します。

--fa-bounce-height

--fa-bounce-height プロパティは、ジャンプする最大の高さを指定します。単位 px で指定し、正の値を指定すると下の方向に対する値となり、負の値を指定すると上の方向に対する値となります。

例えば最大の高さを、 -10px、 -30px 、 -50px にそれぞれ設定する場合は次のように記述します。

--fa-bounce-start-scale-x

--fa-bounce-start-scale-x プロパティは、ジャンプ開始時の水平方向の歪みを指定します。（他の類似するプロパティも同じです）。歪みについては 1 が基準で 1 を指定すると歪みません。 1 より大きい数値を指定すると本来の大きさより広がるように歪みます。 0 から 1 の間の数値を指定すると本来の大きさよりも狭くなるように歪みます。（0 を指定すると幅や高さが 0 になるまで歪むので、あたかも回転しているように見えます）。

例えば歪みの値をそれぞれ、 0 、 0.5 、 1 、 2 、 3 に設定する場合は次のように記述します。

--fa-bounce-start-scale-x プロパティの代わりに --fa-bounce-start-scale-y に対して同じ値を設定すると次のようになります。

Flipの設定（3D空間での回転）

Flip はアイコンが 3D 空間で回転する動作を繰り返します。 Flip を設定する場合は fa-flip クラスを記述します。

デフォルトでは Y 軸を中心に回転します。

Flip については次のプロパティが用意されています。

プロパティ	意味
--fa-flip-x	X軸を中心に回転します
--fa-flip-y	Y軸を中心に回転します
--fa-flip-z	Z軸を中心に回転します
--fa-flip-angle	回転角度を指定します

--fa-flip-x プロパティ、 --fa-flip-y プロパティ、 --fa-flip-z については 0 か 1 の値を指定してください。 1 を指定すると、その軸を中心に回転します。複数のプロパティに 1 を指定すると、 1 が指定されたすべての軸を中心に回転します。

デフォルトでは Y 軸を中心に回転しているので、次のような値が設定された状態です。

X 軸を中心に回転させたい場合は、 --fa-flip-x プロパティに 1 を設定し、 --fa-flip-y プロパティに 0 を設定します。

Z 軸を中心に回転させたい場合は、 --fa-flip-z プロパティに 1 を設定し、 --fa-flip-y プロパティに 0 を設定します。

X 軸と Y 軸を中心に回転させたい場合は、 --fa-flip-x プロパティと --fa-flip-y プロパティに 1 を設定します。（--fa-flip-y プロパティの方は元々 1 なので省略できます）。

回転角度を設定する

回転角度はデフォルトで 180deg となっています。 180 度回転してから元の状態へ戻ります。回転角度を指定する場合は --fa-flip-angle に角度を指定してください（単位として deg を使用してください）。正の値を指定すると時計回り、負の値を指定すると反時計周りに回転します。

例えば Y 軸を中心に 45 度、 90 度、 180 度、回転させる場合は次のように記述します。

Shakeの設定（シェイク）

Shake はアイコンがシェイクする動作を繰り返します。 Shake を設定する場合は fa-shake クラスを記述します。

このアニメーションの場合、設定可能なプロパティはありません。

Spinの設定（中心点を中心とした回転）

Spin はアイコンが中心点を中心に時計回りまたは半時計周りに回転する動作を繰り返します。 Spin を設定する場合は fa-spin クラス、または fa-spin-pulse クラスを記述します。

fa-spin クラスではアイコンが時計周りにスムーズに 360 度回転します。 fa-spin-pulse クラスではアイコンが時計回りに 8 段階に分かれて（45 度ずつ）回転します。

また fa-spin クラスや fa-spin-pulse と併せて fa-spin-reverse クラスを記述すると、反時計回りに回転します。

その他の設定

ここまでにご紹介してきたアニメーションのそれぞれのクラスに併用して設定できるプロパティがいくつか用意されています。

プロパティ	意味
--fa-animation-delay	アニメーションの実行が開始されるまでの待機時間
--fa-animation-direction	アニメーションの再生の方向
--fa-animation-duration	アニメーションの1サイクルの時間
--fa-animation-iteration-count	アニメーションの再生回数
--fa-animation-timing	アニメーションがどのように進行するのかの設定

それでは順に見ていきます。

--fa-animation-delay

--fa-animation-delay プロパティは、アニメーションが開始されるまでの待機時間です。単位として秒（s） またはミリ秒（ms）で指定してください。

例えば Spin と組み合わせて、待機時間として 3 秒を設定する場合は次のように記述します。

3 秒経過してからアニメーションが開始されました。

--fa-animation-direction

--fa-animation-direction プロパティは、アニメーションの再生の方向です。設定できる値は次の 4 つです。

値	意味
normal	順方向に再生されます（デフォルト）
reverse	逆方向に再生されます
alternate	1サイクル毎に順方向と逆方向を反転します（順方向から開始）
alternate-reverse	1サイクル毎に順方向と逆方向を反転します（逆方向から開始）

例えば Spin と組み合わせて、それぞれの値を設定する場合は次のように記述します。

--fa-animation-duration

--fa-animation-duration プロパティは、アニメーションの 1 サイクルにかかる時間です。単位として秒（s） またはミリ秒（ms）で指定してください。

例えば Spin と組み合わせて、 1 サイクルの時間が 800 ミリ秒、 5 秒、 15秒 を設定する場合は次のように記述します。

--fa-animation-iteration-count

--fa-animation-iteration-count プロパティは、アニメーションの再生回数です。例えば 4 を指定すると、 4 サイクル繰り返してアニメーションを停止します。アニメーションをずっと再生する場合は infinite を指定してください。

例えば Spin と組み合わせて、再生回数を 4 回に設定する場合は次のように記述します。

アニメーションが 4 サイクル実行されてから停止しました。

--fa-animation-timing

--fa-animation-timing プロパティは、アニメーションがどのように進行するのかを設定します。デフォルトは一定の速度で進行しますが、徐々に速度を増加したり、逆に徐々に速度を減少することができます。

設定できる値は次の 5 つです。

値	意味	備考
linear	一定の速度	cubic-bezier(0.0, 0.0, 1.0, 1.0)相当
ease	徐々に加速、中央を過ぎたら徐々に減速	cubic-bezier(0.25, 0.1, 0.25, 1.0)相当
ease-in	ゆっくり始まり、最後に向かって徐々に加速	cubic-bezier(0.42, 0, 1.0, 1.0)相当
ease-out	速く始まり、最後に向かって徐々に減速	cubic-bezier(0, 0, 0.58, 1.0)相当
ease-in-out	easeより最初と最後がよりゆっくり	cubic-bezier(0.42, 0, 0.58, 1.0)相当

例えば Spin と組み合わせて、それぞれの値をプロパティに設定する場合は次のように記述します。

値として 3 次ベジェ曲線を表す cubic-bezier(num1, num2, num3, num4) を設定することもできます。

-- --

Font Awesome のアイコンに対するアニメーションの設定方法について詳しく解説しました。