我可以使用transform作为转换属性的值吗

Question

我可以使用transform作为transition属性的值吗？

transition-property: transform;

W3C转换标准没有将转换列为可设置动画的值。

事实上，W3C转换标准在7的表中缺少Animatable的行：是/否。"transform"属性。

我担心这是否合法。

这个stackoverflow答案建议使用transform作为转换属性的值。

我可以使用0%和100%关键帧获得变换动画，但如果只涉及两个状态，我更喜欢过渡而不是动画。

Answer 1

您必须为每个引擎指定确切的名称。因此，例如，对于Safari和Chrome，您应该编写以下内容：

-webkit-transition-property: -webkit-transform;

以下是JSFiddle中的工作示例
注意：我使用了transform属性的简写。

Answer 2

似乎可以，但我不太确定跨浏览器兼容性。你可以在这里玩。使用已经提供的代码，当您将鼠标悬停在红色框上时，它会移动。

Answer 3

selector{
transform: translateX(-100px);
transition:transform 0.4s ease-in-out;
}

因此，从上面的例子中，我们可以看到我们可以使用"transform"属性本身作为"转换"属性的值。

因此，我们的平移将顺利进行，而不是立即向左移动100px，移动将被动画化