¿Cómo escalar y traducir 3D al mismo tiempo?

Question

Tome este ejemplo:

@-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)
    }
}

Esto da como resultado que el div primero se traslade 250 px a la izquierda y luego se escale.¿Cómo puedo hacer que se traduzca en 3D al mismo tiempo que se escala?

He logrado esto animando en el left propiedad, pero eso resulta en un rendimiento muy pobre.

Answer 1

La solucion es:Ponlos todos en una línea.

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