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