css - 我可以使用转换作为转换属性的值吗？

Question

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

transition-property: transform;

W3C 转换标准没有将转换列为 Animatable 值。

事实上， W3C 转换标准在 7 表中缺少 Animatable:Yes/No 行。“转换”属性。

我担心这是否合法。

这个stackoverflow答案建议使用transform作为transition-property的值。

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

所以从上面的例子中，我们看到我们可以使用“transform”属性本身作为“transition”属性的值。

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

3 回答 3