CSS Animations Performance | Desktop e Mobile

[philipealmeida]

Ola bom dia

Em um projeto front-end desenvolvido o designer solicitou algumas animações que resolvi utilizando CSS, porem notei que em dispositivos mobile as animações rodaram com um desempenho bem inferior. Queria saber se já tiveram esta experiência e como solucionar deixando o desempenho agradável para todos os públicos.

O código fonte do projeto é este:
http://quatrorodas.abril.com.br/especiais/projeto-fiat-toro

Abraços
Philipe Almeida

[kazzkiq]

Pelo que eu vi no código, todas as suas animações estão usando translate() ao invés de translate3d(). E o ideal seria usar a segunda opção para uma melhor performance nas animações. Mas qual a diferença entre as duas?

A função translate() movimenta um elemento apenas nos eixos X e Y. Já a função translate3d() permite movimentar nos eixos X, Y e Z. Geralmente os browsers detectam quando um elemento usa alguma função de transformação 3D e habilitam a renderização via GPU para aquela transformação, colocando o elemento em uma nova (e exclusiva) camada do layout, de forma que ao invés de ter que pintar toda a tela novamente à cada frame, apenas aquela camada com o seu elemento é que seja atualizada (em outras palavras: optimization, baby!).

Então provavelmente atualizando suas propriedades de translate(X,Y) para translate3d(X,Y,Z) (onde Z pode ser 0 mesmo), já deve resolver o problema.

Esse foi o "resumo do resumo" sobre como os navegadores tratam animações com translate3d, pra saber mais sobre o assunto (por ninguém mais, ninguém menos que Paul Irish), recomendo o artigo:

Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

[williamcosta]

A uma "nova" propriedade do CSS que seria para fazer otimização que seria o will-change porém o suporte é 0 no IE e EDGE como podemos ver aqui.

[willycamargo]

Se a intenção é otimizar em dispositivos mobile o will-change que o @williamcosta comentou pode resolver boa parte dos problemas, deixando de fora os navegadores default do android < 5 e navegadores padrão da familia lumia.

[felipefialho]

Não precisam se preocupar do will-change não ter suporte em IEs antigos.

Todos os browsers modernos estarão otimizados, os que não suportam essa propriedade não será afetado e segue a vida.

Usem sem dó.

Progressive enhacement é o que vira ;)