Wie kann man 3D gleichzeitig skalieren und übersetzen?

Question

Nehmen Sie dieses Beispiel:

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

Dies führt dazu, dass das Div zunächst 250 Pixel nach links verschiebt und dann skaliert.Wie kann ich es gleichzeitig mit der Skalierung in Translate3d umwandeln?

Ich habe diese Animation auf der erreicht left Eigenschaft, aber das führt zu einer sehr schlechten Leistung.

Answer 1

Die Lösung ist:Füge sie alle in eine Zeile ein.

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