Font Awesomeアニメーション
Web
2021年12月25日
Font Awesome
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-wrench |
| 震える | faa-ring |
| 縦揺れ | faa-vertical |
| 横揺れ | faa-horizontal |
| 点滅 | faa-flash |
| 跳ねる | faa-bounce |
| 回転 | faa-spin |
| 浮く | faa-float |
| ドキドキ | faa-pulse |
| 振る | faa-shake |
| ジャーン | faa-tada |
| 右へ通過 | faa-passing |
| 左へ通過 | faa-passing-reverse |
| 破裂 | faa-burst |
| 落下 | faa-falling |
| 上昇 | faa-rising |
スピードを変更
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>
指定なし
faa-fast
faa-slow
ホバー時のみ動かす
ずっと動いていると鬱陶しい！という場合は、マウスを乗せた時だけアニメーションさせることもできます。
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>お問い合わせはこちら
まとめ
アニメーションすると目立ちますね！
2021年もお世話になりました。
2022年もよろしくお願いします。
この記事を書いた人
みやの
Web・DTP担当
