Question

当我将元素转换为：

时

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

当transform：matrix3d属性发生变化时，该元素不会生成动画。

支持吗？ Mozilla说转换属性可用于转换（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties?redirectlocale=en-US&redirectslug=CSS%2FCSS_animated_properties）

为什么它对我不起作用？

我设置了一个小提琴：http://jsfiddle.net/diracleo/aFudH/1/

Answer 1

在你的css规则中你写了这个：

transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-webkit-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;
-moz-transition: transform 1s, -webkit-transform 1s, -moz-transform 1s;

但是对于应该转换的属性，您应该使用与transition匹配的相应供应商前缀（如果该属性需要供应商前缀）。

所以它看起来像这样：

transition: transform 1s;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;

Answer 2

我将您的代码更改为此并且似乎正常工作：

transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;

http://jsfiddle.net/aFudH/2/

为什么我的CSS转换不适用于transform：matrix3d属性？

2 个答案: