【问题标题】: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 stackoverflow answer 建议使用transform作为transition-property的值。

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

【问题讨论】:

    标签: css transform css-transitions css-animations


    【解决方案1】:
    selector{
    transform: translateX(-100px);
    transition:transform 0.4s ease-in-out;
    }
    

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

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

    【讨论】:

      【解决方案2】:

      您必须为每个引擎指定准确的名称。例如,对于SafariChrome,您应该编写以下内容:

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

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

      【讨论】:

        【解决方案3】:

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

        【讨论】:

        • @PK 我知道,但是页面被编码了,所以你可以编辑代码,将其更改为左侧的transition-property进行转换,它会在右侧更新。跨度>
        猜你喜欢
        • 2017-05-05
        • 2021-03-28
        • 2020-02-27
        • 2014-05-12
        • 1970-01-01
        • 2022-01-17
        • 2020-01-01
        • 1970-01-01
        • 2020-06-30
        相关资源
        最近更新 更多