CSS：transitionでのゼロの解釈

transitionでのゼロに注意

CSSで時間変化を指定する transition ですが、IE11とEdgeのみ値の解釈が他のブラウザと違います。

注意するのは「0」を含む値。

たとえば要素の左からの位置を以下のように時間変化指定すると……

left: 50%;
↓
left: 0;

ChromeとFirefoxは正しく認識しますが、IE11とEdgeは「最初の」50％が認識できません。

時間変化をせず、左からの位置はずっとゼロのまま。

原因

IE11とEdgeは transition で変化する「値の単位」が揃っていないと正しく解釈できません。

left: 50%;
↓
left: 0%;

という感じで指定すればIE11とEdgeでも正しく動作します。

数値指定する際はゼロにつける単位に注意しましょう。