如何同时缩放和翻译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转换为左侧，然后缩放。如何在缩放的同时使其翻译3d？

我已经在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);
    }
}

.