Como dimensionar e traduzir 3D ao mesmo tempo?

Question

Veja este exemplo:

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

Isso resulta na div primeiro traduzindo 250px para a esquerda e depois dimensionando.Como posso fazer com que ele seja traduzido em 3D ao mesmo tempo em que está sendo dimensionado?

Eu consegui essa animação no left propriedade, mas isso resulta em um desempenho muito ruim.

Answer 1

A solução é:coloque todos eles em uma linha.

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