IE10 または 11 でこの JSBinを参照してください。
要素を調べる#testと、遷移プロパティが次のように表示されていることがわかります-webkit-transform(遷移は発生しません)。ここtransition: -webkit-transform;に示すように、宣言をコメント アウトすると、遷移が機能します。
IE がベンダー プレフィックス値を無効なプロパティ値として削除しないのはなぜですか? ちなみに、Chrome で似たようなことをすると、-ms-transition後から言うと、-webkit-transition当然のことながら削除され、-webkit-transition宣言のみが使用されます。これが問題になるのは IE だけのようです。
これについてさらに調査を行ったところ、IE に関するものではなく、Chrome のバグのように見えます。
の認識されない、アニメーション化できないプロパティに関する仕様の内容は次のtransition-propertyとおりです。
リストされた識別子の 1 つが認識されたプロパティ名ではないか、アニメーション化可能なプロパティではない場合でも、実装は、'遷移期間」、「遷移遅延」、および「遷移タイミング機能」。つまり、認識されていない、またはアニメーション化できないプロパティは、インデックスの一致を維持するためにリストに保持する必要があります。
仕様は、指定されたプロパティのいずれもサポートされていない、またはアニメート可能でない場合を考慮していないようです。遷移 propdefs に続くセクションでも同様です。IE は、遷移するサポートされているプロパティがないにもかかわらず、宣言を有効なものとして扱っているように見えます。これにより、以前の宣言がオーバーライドされ、効果的に宣言が同等になりますtransition-property: none(つまり、結果は似ていますが、観察したように、値は実際には異なります)。まで計算しnoneます)。
Firefox は IE と同じように動作するように見え、宣言を と同等のものとして扱いtransition-property: noneます。
さらに、接頭辞なしのプロパティ名と接頭辞付きのプロパティ名を同じ宣言に入れるとtransform、IE と Firefox は変換を適切にアニメーション化します (順序は関係ありません)。
transition: -webkit-transform 1s, transform 1s;
ただし、Chrome が宣言を削除する原因となる認識されていないプロパティと一緒に動作すると予想される他のプロパティを配置すると、それでもその宣言は削除されます。はい、IE と Firefox が上記の宣言でトランジションを正しく適用する場合、Chrome はそれを完全に無視します。
ただし、この問題は不明なプロパティ名でのみ発生するようです。たとえば、次のように、サポートされているがアニメーション化できないプロパティを指定した場合background-image:
transition: -webkit-transform 1s, background-image 1s;
Chrome は、変換をうまくアニメーション化できます。
とはいえ、仕様があいまいなのか、それとも IE と Firefox で示されている動作が実際に正しいのか、私にはまだ完全にはわかりません。どちらの方法でも少し説明を加えることができるように思われるので、私は先に進み、これについて CSSWGに電子メールで送りました。