如何同时缩放和翻译3D？

Question

举个例子：

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1);
        -webkit-transform: translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8);
        -webkit-transform: translate3d(250px, 0, 0)
    }
}

这导致div首先向左翻译250px然后缩放。如何在缩放的同时使它成为translate3d？

我在left属性上实现了此动画，但这会导致性能非常差。

Answer 1

解决方案是：将它们全部放在一行中。

@-webkit-keyframes slideInViewport {
    from{
        -webkit-transform: scale(1) translate3d(0, 0, 0);
    }
    to{
        -webkit-transform: scale(0.8) translate3d(250px, 0, 0);
    }
}