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

Question

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

transition-property: transform;

[W3C transition standard并未将变换列为可设置动画的值。

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

我担心这是否合法。

[ This stackoverflow answer 建议使用transform作为过渡属性的值。

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

Answer 1

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

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

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

Answer 2

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

Answer 3

const size = carouselImages[0].clientWidth;
let counter = 0;
nextBtn.addEventListener('click',()=>{

    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    // transform:translateX(-100px)
    carouselSlide.style.transform = 'translateX('+ (-size*counter) +'px)';
})