如果检查#test元素,您将看到它将转换属性显示为-webkit-transform(并且不会发生转换).如果您注释掉转换：-webkit-transform;声明,如here所示,然后过渡工作.
为什么IE没有将供应商前缀值作为无效的属性值丢弃？顺便说一句,如果我在Chrome上做类似的事情 – 比如说-webkit-transition之后的-ms-transition – 它会按原样删除它,并且只使用-webkit-transition声明.似乎仅在IE上这是一个问题.
解决方法
If one of the identifiers listed is not a recognized property name or is not an animatable property,the implementation must still start transitions on the animatable properties in the list using the duration,delay,and timing function at their respective indices in the lists for ‘transition-duration’,‘transition-delay’,and ‘transition-timing-function’. In other words,unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.
规范似乎没有考虑到指定的属性都不受支持或可动画的情况,即使在转换propdefs之后的部分也没有.看起来IE正在将声明视为有效,虽然没有被转换的支持属性,从而覆盖了先前的声明,并有效地使声明等效于transition-property：none(即结果类似,但正如您所观察到的那样该值实际上并不计算为无).
Firefox似乎与IE的行为相同,将声明视为与transition-property相同：none.
此外,如果您将未加前缀和前缀的转换属性名称放在同一个声明中,IE和Firefox将为转换设置正常的动画(顺序无关紧要)：
transition: -webkit-transform 1s,transform 1s;
但是,如果您放置任何其他您希望与无法识别的属性一起使用的属性,导致Chrome放弃声明……它仍会删除该声明.是的,IE和Firefox在上述声明中正确应用了转换,Chrome完全忽略它.
但是,似乎只有未知属性名称存在这个问题.例如,如果指定受支持但不可设置动画的属性,例如background-image：
transition: -webkit-transform 1s,background-image 1s;
Chrome可以很好地为变换设置动画.
尽管如此,我仍然不完全确定规范是否含糊不清,或者IE和Firefox中显示的行为实际上是正确的.听起来它无论如何都可以使用一些澄清,所以我已经开始和emailed CSSWG有关.
