skysan's programming notebook

コーディングして思ったことなどを気ままに

fontawesomeのアニメーションが動かない

fontawesome Vue.js Nuxt.js

はじめに

  • fontawesomeのSpinnerアイコンに回転アニメーションを設定したが、動かない。
  • MacbookのChromeでは動かないが、iOSのSafariで動いていたので、調査した。

先に結論

  • OS依存で、macOSの場合、設定の視覚効果を減らすのチェックを外すとアニメーションは動いた。
  • 上記の設定は、CSSで@media(prefers-reduced-motion)の設定に影響する。

developer.mozilla.org

環境情報

  • OS: macOS Monterey 12.6
  • フレームワーク: Nuxt 2.15.8
  • fontaswesome関連ライブラリ
    • @fortawesome/fontawesome-svg-core : "^6.2.0"
    • @fortawesome/free-brands-svg-icons : "^6.2.0"
    • @fortawesome/free-regular-svg-icons : "^6.2.0"
    • @fortawesome/free-solid-svg-icons : "^6.2.0"
    • @fortawesome/vue-fontawesome : "^2.0.8"
  • 動作確認したブラウザ

問題のコード

ソースはVueで記述。

<fa :icon="['fas', 'circle-notch']" spin class="fa-spin" />

Spinner系アイコンにfa-spinクラスをつけると、アイコンが回転する。

Style Cheatsheet | Font Awesome Docs

実際の動き
期待する動き

調査

公式のヘルプを探す

公式のヘルプに回答があったので、あっさり解決。 ただし、MDNの記事に飛ばされる。

fontawesome.com

fontawesomeのアニメーションを担当するクラスfa-spinは@media(prefers-reduced-motion: reduce)が設定されていた。

これは、OSの設定が反映されているので、macOSの場合は、以下の通りでアニメーションが有効化された。

アクセシビリティ＞ディスプレイ＞視覚効果を減らす: チェックを外す

参考