ページ読み込み時の CSS トランジションの開始の抑制

特定の状況では、ページの読み込み中に CSS トランジションが誤ってアクティブになり、要素がちらつく原因になることがあります。この問題は、要素に色の遷移を適用するときに発生する可能性があります。

次の例のように:

CSS:

p.green {
   color: green;
   transition: color .2s;
}

p.green:hover {
   color: yellow;
}

HTML:

<p class="green">The Flashing Text</p>

ページが読み込まれると、

要素内のテキストが黒 (初期色) から緑に変わります。この動作は望ましくないものであり、視覚的に混乱を招く可能性があります。

この意図しない移行を防ぐには、Chrome の動作の固有の側面を利用する解決策が必要です。ページに

<script> </script>