如何同时缩放和翻译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);
    }
}