Font Awesomeアニメーション

2021年12月25日

A N I M A T I O N

みなさんメリークリスマスです。
ケミストのWeb担当みやのです。

クリスマスなので雪を降らせてみました。
えっ？見づらい？では暗くしてみましょう。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はFont Awesomeをアニメーションさせてみます。

参考：サルワカ｜【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

参考：Web-saku｜Font Awesome Animationの使い方

使い方

ヘッダー内に以下のCSSを追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.3.0/font-awesome-animation.css" type="text/css" media="all" />

<i>タグにアニメーションのクラス（faa-〇〇 animated）を追加します。

<i class="fas fa-phone-alt faa-ring animated"></i>

アニメーション一覧

スピードを変更

faa-fastで速く
faa-slowで遅くできます。

<i class="fas fa-spinner faa-spin animated"></i>
<i class="fas fa-spinner faa-spin animated faa-fast"></i>
<i class="fas fa-spinner faa-spin animated faa-slow"></i>

ホバー時のみ動かす

ずっと動いていると鬱陶しい！という場合は、マウスを乗せた時だけアニメーションさせることもできます。

animatedをanimated-hoverに変えるだけです。

<i class="fas fa-heart faa-pulse animated-hover"></i>

上記の設定ではアイコンにホバーした時だけアニメーションしますが、アイコンの横の文章にホバーしてもアニメーションするように設定できます。

親要素にfaa-parent animated-hoverを設定し、アイコンにはfaa-〇〇のみ設定します。

<span class="faa-parent animated-hover">
  お問い合わせはこちら
  <i class="fas fa-arrow-right faa-horizontal"></i>
</span>

まとめ

アニメーションすると目立ちますね！

当サイトに関するご意見、ご感想、制作のご依頼はお問い合わせフォームのほか、Chatworkでも受け付けております。

私たちは、クラウド型ビジネスチャットChatworkを導入しています。

国内利用者数No.1 中小企業向けビジネスチャット「Chatwork」

2021年もお世話になりました。
2022年もよろしくお願いします。