便利ツールを使う

【Font Awesome③】動かしたい!点滅・バウンド・傾き・ホバー等アニメーションの設定の方法

2022年3月5日

Font Awesomeを動かしたい!点滅・バウンド・傾き等アニメーションの設定とやり方

Font Awesomeを動かすことってできる?やり方が知りたい!

 

ブログやサイトだと、マウスホバーで動きのあるタイプが使いやすいかなと思います。(指またはマウスホバーしてみてください↓)

 

Font Awesomeは、アニメーションのように動かすクラスコードを提供してくれています!

  • 常に揺れてる
  • 注目・目を惹かせたい(SNSアイコン等)
  • 注意を引く・注意喚起に
  • ホバー時(マウスを当てると)動く

と、使い方によっては読者への注目効果も高いので、ぜひ活用してみてください。

Font Awesome旧バージョン5新バージョン6で使用可能です!

Font Awesomeの基本的な使い方

  • 基本的な使い方
  • そもそもFont Awesomeがうまく反映されない人
  • 新バージョン6で使用する場合は無料登録が必要

はこちらから確認してください。

  • 文字の大きさを変える
  • 色を変える

方法はこちらに!

Font Awesomeのアニメーションの使い方

紹介するコード(クラス名)は全て基本的に同じ挿入場所になります!5,6で微妙にコードが異なりますが挿入するクラス名の位置は同じでOKです!

Font Awesomeからコードをコピーする

新:<i class="fa-brands fa-twitter"></i>
旧:<i class="fab fa-twitter"></i>

アニメーションのクラス名を追加

基本的に挿入場所は変わりません。

新:<i class="fa-brands fa-twitter クラス名を追加"></i>
旧:<i class="fab fa-twitter クラス名を追加"></i>

新:<i class="fa-brands fa-twitter fa-beat"></i>
旧:<i class="fab fa-twitter fa-beat"></i>

前回紹介した「カラー」と「サイズ変更」を組み合わせて使用することもできます!

<i class="fa-brands fa-twitter アニメーションクラス名 サイズクラス名 色のクラス名"></i>

Follow me

<i class="fa-brands fa-twitter fa-beat fa-5x home-size"></i>

アイコンを傾ける・反転

コード・クラス名一覧

ブラウザ表示クラス名詳細
fa-rotate-9090度回転
fa-rotate-180180度回転
fa-rotate-270270度回転
fa-flip-horizontal水平方向に反転
fa-flip-vertical垂直方向に反転
fa-flip-both水平かつ垂直方向に反転
fa-rotate-by任意の角度で回転<style>で設定が必要
反転<span class>で設定が必要

挿入例

<i class="fa-solid fa-snowboarding fa-rotate-90"></i>

任意の角度で傾けたい(応用)

『クラス名(fa-rotate-by)』+『スタイル(style="--fa-rotate-angle: 任意の数字deg;")』を追加します。

挿入手順①クラス名を追加

<i class="fa-solid fa-snowboarding fa-rotate-by"></i>

挿入手順②スタイルを追加

<i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;"></i>

「45deg 」「-45deg 」「80deg 」の数字で傾き加減を設定できます。※「-」を付けると左に傾きます

回転と反転を同時にする(応用)

回転と反転を同時にする場合は、同じ親要素にクラスで命令すると上書きされてしまうため、別々の呼び出しで行います。

挿入手順①クラス名を追加

<i class="fa-solid fa-snowboarding fa-rotate-270"></i>

挿入手順②スタイルを追加

<span class="fa-flip-vertical" style="display: inline-block;">
  <i class="fa-solid fa-snowboarding fa-rotate-270"></i>
</span>

赤色の部分を、先ほどのクラス一覧から持ってきて貼り付ければOKです!

アニメーションで動かす

コード・クラス名一覧

挿入例

<i class="fa-solid fa-snowboarding fa-beat"></i>
ブラウザ表示クラス名詳細
fa-beatビートを刻む
fa-fade点滅
fa-beat-fadeフェードイン・アウト
fa-bounce跳ねる
fa-flip回転
fa-shakeシェイク
fa-spinスピン

※回転(fa-flip)は、携帯で見るとバグが起こりやすいので注意。
以下詳細設定で、回転の動きが見えるようにしてありますが、携帯で見るとページ全体のバグが起きるため《PCのみ》閲覧可能になってます。

ビートを刻む(fa-beat)

スタイルクラス詳細
--fa-animation-duration: 0.5s;最大になるまでの秒数
--fa-beat-scale: 2.0;拡大縮小の最大値
秒数等は自分で設定
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>

点滅(fa-fade

スタイルコード詳細
--fa-animation-duration: 2s;秒数
--fa-fade-opacity: 0.6;不透明度
秒数や透明度は自分で設定
<i class="fa-solid fa-i-cursor fa-fadestyle="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" ></i>

フェードイン・フェードアウト(fa-beat-fade)

スタイルコード詳細
--fa-beat-fade-opacity: ;不透明度の最小値
--fa-beat-fade-scale: ;拡大縮小の最大値
透明度は自分で設定
<i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" ></i>

ジャンプ(fa-bounce)

 

スタイルコード詳細ブラウザ表示
--fa-bounce-rebound: 1;着地後のリバウンド量
--fa-bounce-height: 1;ジャンプの最大高さ
--fa-bounce-start-scale-x: 1;ジャンプ開始で水平方向の回転
--fa-bounce-start-scale-y: 1;ジャンプ開始で垂直方向に回転
--fa-bounce-jump-scale-x: 1;ジャンプ上部で水平方向に回転
--fa-bounce-jump-scale-y: 1;ジャンプ上部で垂直方向に回転
--fa-bounce-land-scale-x: 1;着陸時で垂直方向に回転
--fa-bounce-land-scale-y: 1;着陸時で垂直方向に回転
<i class="fa-solid fa-envelope fa-bounce" style=" --fa-bounce-start-scale-x: 1;"></i>

0で無効化、1で有効化になります。

回転(fa-flip)

スタイルコード詳細ブラウザ表示
--fa-flip-x: 1;斜め回転
--fa-flip-y: 1;横回転
--fa-flip-z: 1;斜め回転
--fa-flip-x: 1; --fa-flip-y: 0;縦回転
--fa-animation-duration: 1;どのくらいの速度で回転するか(秒数)
<i class="fa-solid fa-scroll fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;" ></i>

0で無効化、1で有効化になります。

スピン(fa-spin)

クラス名詳細ブラウザ表示
fa-spin: 1;時計回りに360度回転
fa-spin-pulse: 1;時計回りに360度回転(8段階)
fa-spin-reverse: 1;反時計回りに回転
0で無効、1で有効
<i class="fa-solid fa-bell fa-shake fa-2xl kiiro-color"></i>

0で無効化、1で有効化になります。

以下アニメーションは<head>にコード追加必須

以下、アニメーションは<head></head>コードを挿入すると、アニメーションとして動作するものです。※新旧5,6共に

アニメーションを動作させるために、<head></head>の間に以下コードを挿入してください。

<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" />

「WordPress」だと「外観」>「テーマファイルエディター」>「header.php」
AFFINGERは「AFFINGER管理画面」>「その他」>「コードのheadに出力するコード」にペースト

ブラウザ表示クラス名詳細
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バースト

挿入例

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

速度を変える

  

ブラウザ表示クラス名詳細
faa-fast速く
faa-slow遅く

挿入例

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

アイコンをホバー時に動かす

 ホバーで動かす

「animated」の代わりに「animated-hover」を使用します。

<i class="fa-solid fa-apple-whole アニメーションクラス名 animated-hover"></i>

挿入例

<i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>

ホバーしてアニメーション&色を変える


ホバーで動かす

先ほどの応用にプラスして、カラー設定をCSSコードに「元のカラー」と「ホバー時のカラー」を追加させて動かします。

【WordPress】「外観」>「カスタマイズ」>「追加CSS」または「外観」>「テーマエディター」>「子テーマのStyle.css」

//元カラー
.red-color { color: #C62828;}

//ホバー時のカラー
.red-color:hover { color: #00bfff;}

アニメーションの入れ方は変わりません。

カラー設定や、Webアイコンの大きさの指定は<span>の親要素に反映さえます。

<span class="red-color fa-2xl">
  <i class="fa-solid fa-apple-whole faa-wrench animated-hover"></i>
</span>

親要素にホバーした際に動かす

リンク全体に(マウスを当ててみて)

pタグ全体に(文字にもマウスを当ててみて)

親要素とは<p>タグ・<a>タグ・<div>タグのような「段落文章全体」「リンク」「ボックス」などで、アイコンだけではなく全体にカーソルが当たった時に、アイコンが動くようにできる設定です。

『親クラス』に『faa-parentanimated-hover』を挿入します。

挿入例(aのリンクが親要素の場合)

<a href="#" class="faa-parent animated-hover">
<i class="fa-brands fa-twitter faa-wrench"></i>あいうえお
</a>

あいうえお

挿入例(pのリンクが親要素の場合)

<p class="faa-parent animated-hover">
<i class="fa-brands fa-twitter faa-wrench"></i>あいうえお
</p>

あいうえお

ホバー時に色を変える方法はこちら

まとめ

Font Awesomeのアニメーションについて、まとめました!

平面のブログに動きが出ると、目が行きやすいので『注意喚起』や『SNSへのフォロー』などにおすすめです!

  • この記事を書いた人
  • 最新記事

まめこ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-便利ツールを使う
-, ,