Comment, à l'échelle et translate3d en même temps?

Question

Prenez cet exemple:

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

Cette résultats dans la div d'abord la traduction de 250px à gauche et ensuite à l'échelle.Comment puis-je faire translate3d en même temps, il est de mise à l'échelle?

J'ai réalisé cette animation sur le left bien, mais que les résultats dans de très mauvaises performances.

Answer 1

La solution est:les mettre tous dans une seule ligne.

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