仅在 X 轴上具有转换的 CSS 动画

Question

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

下面的代码适用于我的从左到右动画，但是当我尝试以任何其他方式与元素交互时会出现问题，因为我最终会得到一个不需要的动画，因为过渡设置为"all"。 我以为将其更改为"左"可以做到这一点，但它确实适用于 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); }