Font Awesomeに動きのあるアニメーションの使い方【CSS】

CSS Font Awesomeに動きのあるアニメーションを導入しよう【CSS】

Font Awesome(フォントオーサム)の使い方とダウンロード方法は、他の記事で紹介してきました。今回は、Font Awesome で通常の静止状態ではなく、動きのあるアニメーションを付ける方法を紹介します。

Font Awesomeに動きを付けて、他の人と差をつけてみましょう。

 Font Awesome の使い方や設定方法は、以下の記事を参考にしてください。

参考 Font Awesome を使おう・Webアイコンの使い方【CSS】

 

Font AwesomeのWebアイコンに動きを付けたアニメーション例

Font Awesomeには、色々なアニメーションを付けることができますので、Font AwesomeのWebアイコンに合った動きを付けて目立つようにしてみましょう。

   

Font Awesomeのアニメーションを行う前の準備

Font Awesomeのアニメーションを利用するには「Font Awesome Animation」というスタイルシートを読み込む必要があります。

この設定を行わないとアニメーションが付けられないため、まずは以下のように設定してください。

設定は、簡単ですので誰にでもできます。

Font Awesome Animationの専用スタイルシートを読み込む

「Font Awesome Animation」の専用スタイルを読み込むには、以下のコードをheadタグに追加します。

Font Awesome Animation専用スタイル

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

 

THE THORの場合

THE THORのヘッダーPHP
ダッシュボード  外観  テーマ編集
テーマ編集から「THE THOR」を選択して「テーマヘッダー」を開きます。その中の<head>〜</head>の間に上記の専用スタイルを追加します。

 

Font Awesomeの設定をされていない方(初めての方)は、まず「Font Awesome」の専用スタイルを追加してください。
アニメーションとは別に追加します。Font Awesome専用スタイル

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

 

僕の場合は、以下のように専用スタイルを読み込んでいます。そのままコピペしてもらえれば使えます。

専用スタイル記述例

<!--/font-awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<!--/Font Awesome Animation-->
<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のアニメーションの準備は完了です。

いよいよ、動きを付けていきましょう。

Font Awesomeにアニメーションを付ける方法

Font Awesomeにアニメーション(動き)を付ける方法の基本を説明します。基本がわかると、次に紹介する一覧のコードから好きに変更することができます。

アニメーションの基本構成

まずは、以下のFont Awesomeにアニメーションを付けた例で説明します。


<i class=”far fa-hand-point-up faa-vertical animated”>

Font AwesomeのClass説明

基本構成は「アイコン名」と「アニメーション名」です。

アイコンを探したり、色を変更したり、大きさを変更する場合は、以下の記事を参考にしてください。

参考 Font Awesome を使おう・Webアイコンの使い方【CSS】

 

アニメーション名は、次に紹介する一覧からお好きなものを使ってください。

Font Awesomeアニメーション一覧

Font Awesome Animationで動きのあるアイコンを一覧表にまとめてみました。

15種類のアニメーションをご覧ください。

アニメーション class名 コード
 揺れる faa-wrench animated <i class=”fas fa-walking faa-wrench animated”></i>
 プルプル faa-ring animated <i class=”fas fa-bell faa-ring animated”></i>
 横揺れ faa-horizontal animated <i class=”far fa-hand-point-right faa-horizontal animated”></i>
 縦揺れ faa-vertical animated <i class=”far fa-hand-point-down faa-vertical animated”></i>
 点滅 faa-flash animated <i class=”fas fa-exclamation-triangle faa-flash animated”></i>
 跳ね faa-bounce animated <i class=”fas fa-volleyball-ball faa-bounce animated”></i>
 回転 faa-spin animated <i class=”fas fa-sync-alt faa-spin animated”></i>
 浮く faa-float animated <i class=”fas fa-paper-plane faa-float animated”></i>
 膨らむ faa-pulse animated <i class=”fas fa-heart faa-pulse animated”></i>
 シェイク faa-shake animated <i class=”fas fa-glass-martini-alt faa-shake animated”></i>
 ジャーン faa-tada animated <i class=”fas fa-skull-crossbones faa-tada animated”></i>
 通過 faa-passing animated <i class=”fas fa-ambulance faa-passing animated”></i>
 戻る faa-passing-reverse animated <i class=”fas fa-fast-backward faa-passing-reverse animated”></i>
 バースト faa-burst animated <i class=”fas fa-bomb faa-burst animated”></i>
 落ちる faa-falling animated <i class=”fas fa-snowflake faa-falling animated”></i>

アイコンの色や大きさを変更したい場合は、以下の記事を参考にしてください。

参考 Font Awesome を使おう・Webアイコンの使い方【CSS】

アイコンにマウスを乗せた時だけ動かす

マウスを乗せた時だけアイコンを動かす方法の紹介です。

以下のアイコンにマウスを乗せてみてください。

 マウスを乗せてみて〜

<i class="fas fa-bolt fa-2x faa-ring animated-hover my-orange"></i>

 

animated  animated-hover

hoverを追加するだけです。

まとめ

Font Awesomのアニメーションはいかがだったでしょうか?

注目させたいとことに、さり気なくアニメーションを使うと効果的でしょうね。

色々なアイコンにアニメーションをアレンジして、他にないサイトを作っていってください。

参考 THE THORのリストアイコンにFont Awesome 5のアイコンを使う方法

Font Awesomeに動きのあるアニメーションを導入しよう【CSS】
フォローお願いします