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

Posted 2023-03-06

【中文标题】我可以使用转换作为转换属性的值吗？

【英文标题】：Can i use transform as a value of transition-property?

【发布时间】：2013-06-30 00:43:42

【问题描述】：

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

transition-property: transform;

W3C transition standard 没有将变换列为 Animatable 值。

事实上W3C transform standard 在表格 7 中缺少 Animatable:Yes/No 的行。'transform' 属性。

我担心这是否合法。

This *** answer 建议使用transform作为transition-property的值。

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

【参考方案1】：

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

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

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

【参考方案2】：

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

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

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

【参考方案3】：

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

【讨论】：

@PK 我知道，但是页面被编码了，所以你可以编辑代码，将其更改为左侧的transition-property进行转换，它会在右侧更新。跨度>