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

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

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

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

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>の間に上記の専用スタイルを追加します。

Memo

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アニメーション一覧

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>

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

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

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

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

 マウスを乗せてみて〜

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

hoverを追加するだけです。

まとめ

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です