【CSS】transitonアニメーションを指定するときはallを使わない方が良い理由
CSSのtransitonアニメーションを指定するときはallを使わない方が良い理由について紹介します。
【CSS】transitonアニメーションを指定するときはallを使わない方が良い理由
結論から言うと、transitonアニメーションを指定するときは、以下のコードのようにCSSアニメーションを効かせたい部分に対して、allを使わないようにしましょう！
transition: all 1s;
allを指定しても、狙った箇所にCSSアニメーションを実行させることはできます。
しかし、allを指定してしまうと、ブラウザ幅を小さくしたり拡大した時に毎回アニメーションが実行されてしまいます。
そうならないためにもtransitionを使う際には、allではなくCSSアニメーションを効かせたい特定箇所に対してだけCSSを書くようにしましょう。
例えば、以下のようなコードが良い例です。
See the Pen
Untitled by webis (@webis-co)
on CodePen.
allではなく、opacityにだけCSSアニメーションが効くようにしています。
特定の箇所にだけCSSアニメーションを当てることで、余計なアニメーションが実行されません。
transitionを使う際には、是非allを使わないように気をつけていきましょう！
DOWNLOAD
ブログ用WordPressテーマを無料配布中
実務で使える構成・設計をベースにしたテーマです。
すぐにブログ運用を始めたい方はこちらからダウンロードできます。
Webサイトの集客や導線設計でお悩みではありませんか？
当社では、データ分析（GA4・検索データ）をもとに、
成果につながるWeb制作・改善をご提案しています。
課題の整理からでも大丈夫ですので、まずはお気軽にご相談ください。
無料で相談する
Profile：
大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。
この著者の記事を見る
