transitionが効かない

以下の CSS を書いたのだが動作する気配がなかった。これを解決しよう。

transition: transform 0.3s opacity 0.2s;

原因の仮説1

まずは記述方法が間違っていることを疑った。

仮説の検証

記述方法を確認する為にMDNを確認した

検証の結果

やはり記述方法が間違っていた。プロパティごとにカンマで区切っていなかったことが原因だった。

対処

transition: transform 0.3s opacity 0.2s;

これをこう書き直した。

transition: transform 0.3s, opacity 0.2s;

結果

無事 transition が実行されるようになった

振り返り

VSCodeにCSS Lilnterを導入したほうが良さそう。こういった書き間違いで時間を消費してしまうこと
を極力防ぎたい。