Come scalare e tradurre3d allo stesso tempo?

Question

Prendi questo esempio:

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

.

Questo risulta nel div prima traduzione di 250 px a sinistra e quindi ridimensionamento.Come posso renderlo translate3d allo stesso tempo è ridimensionare?

Ho raggiunto questo animazione sulla proprietà left, ma ciò si traduce in prestazioni molto scarse.

Answer 1

La soluzione è: mettili tutti in una riga.

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

.