Como dimensionar e traduzir 3D ao mesmo tempo?
Pergunta
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.
Solução
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);
}
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow