如何同时进行缩放和translate3d？

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首先将250 in向左转换，然后再进行缩放。我怎样才能使它在缩放的同时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);
    }
}