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-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年もよろしくお願いします。