css-transitions - 仅在 X 轴上进行变换的 CSS 动画

Question

是否可以使用 CSS 过渡和变换的组合仅对 X 轴进行动画处理，我想使用 translate3D 值作为其在移动设备上加速的硬件。

下面的代码非常适合我的从左到右的动画，但是当我尝试以任何其他方式与元素交互时，问题就出现了，因为我最终得到了一个不需要的动画，因为过渡设置为“全部”。我认为将其更改为“左”会做到这一点，但它与 trasnlate3D 一起工作我认为这是有道理的，因为您不是动画左侧位置而是使用 translate3d 在 x 轴上移动

.slide-xy {             -webkit-transition: 0.25s all ease-out; }
.slide-xy {            -webkit-transform: translate3d(0,0,0); }
.active .slide-xy {    -webkit-transform: translate3d(-80%,0,0); }

Answer 1

正确的语法是：

.slide-xy {             -webkit-transition: 0.25s -webkit-transform ease-out; }
.slide-xy {            -webkit-transform: translate3d(0,0,0); }
.active .slide-xy {    -webkit-transform: translate3d(-80%,0,0); }