Come scalare e tradurre3d allo stesso tempo?
Domanda
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.
Soluzione
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);
}
}
. Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow