【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を使わないように気をつけていきましょう!

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。