Performance em animações CSS

[lucasferreiralimax]

Olá!

Quais as melhores práticas para performance em animações em CSS?
Fiz esse exemplo e estou pesquisando e pensando em como posso melhorar minhas animações

Exemplo simples

Animação Simples - Codepen

Utilizei o will-change nas propriedades que iriam ter alterações constantes e também utilizei o transition único para cada propriedade reduzindo-o assim
Sei também que as propriedades que utilizam a GPU e reduz re-rendering como transform são as mais indicadas para alterações.

• will-change
• abreviar transitions
• reduzir re-paint e re-rendering

Sei que é uma animação simples
Porém vocês enxergam algo que pode melhorar a fluidez e performance?

Antes de tudo, obrigado por compartilhar sua opinião 👍

[tarciozemel]

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

[felquis]

No seu exemplo apesar ter usado will-change para opacity e color, está faltando o will-change do scale.

Algo a se levar em consideração é prefers-reduced-motion

Para complementar este link, vale explorar o capitulo Animations do Web Fundamentals contem 9 tópicos pertinente a animações na web para ver se tem algo lá que você ainda não conhece.

[tarciozemel]

Não é bem assim que se usa will-change...

https://dev.opera.com/articles/css-will-change-property/

[lucasferreiralimax]

https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Muito bom esse conteúdo, analisar a renderização do DOM realmente é o coringa para ter boa performance, seja isso em animações ou até na estrutura básica de uma pagina bem elaborada.

No seu exemplo apesar ter usado will-change para opacity e color, está faltando o will-change do scale.

Algo a se levar em consideração é prefers-reduced-motion

Para complementar este link, vale explorar o capitulo Animations do Web Fundamentals contem 9 tópicos pertinente a animações na web para ver se tem algo lá que você ainda não conhece.

Muito bom esse artigo do web fundamentals, as explicações sobre as diferenças do keyframes vs resquestAnimation com js me mostrou novas possibilidades, mas ainda assim acho mais simples escrever com keyframes.

Não é bem assim que se usa will-change...

https://dev.opera.com/articles/css-will-change-property/

Animations e Performance do Web Fundamentals

Nesse artigo do web fundamentals explica de outra forma o will-change da forma que eu usei.

Uso de la propiedad will-change
Usa will-change para asegurarte de que el navegador reconozca que deseas modificar la propiedad de un elemento. De este modo, el navegador puede aplicar las optimizaciones más adecuadas antes de que realices el cambio. Sin embargo, no uses will-change demasiado porque puede causar que el navegador desperdicie recursos, y esto también causa más problemas de rendimiento.

La regla de oro es que, si la animación podría desencadenarse en los próximos 200 ms, ya sea mediante la interacción de un usuario o debido al estado de tu app, se recomienda aplicar la propiedad will-change en los elementos animados. En la mayoría de los casos, entonces, cualquier elemento de la vista actual de tu aplicación que desees animar debe tener la propiedad will-change habilitada para las propiedades que vayas a modificar. En el caso del ejemplo del cuadro que usamos en las guías anteriores, la adición de will-change para los atributos transforms y opacity se vería de la siguiente manera:

.box {
  will-change: transform, opacity;
}

Sabendo que só faz sentindo usar o will-change em elementos que realmente vai existir a alteração de propriedades para forçar o browser a pre-renderizar essas propriedades

[lucasferreiralimax]

W3C animations esse documento também tem muito conteúdo para entender melhor as animações.

[felquis]

Animação de gradientes com CSS

Me deparei com a necessidade de usar keyframes para animar o background-image com radial-gradient.

Porém apenas usando CSS Custom Properties no radial-gradient não é o suficiente para animar a transição com keyframes, no grupo do facebook me recomendaram o CSS.registerProperty e funcionou "magicamente".

Hoje o CSS.registerProperty tem suporte de 63% das sessões segundo o caniuse.com

Meu experimento com animação de gradiente radial

[lucasferreiralimax]

Animação de gradientes com CSS

Me deparei com a necessidade de usar keyframes para animar o background-image com radial-gradient.

Porém apenas usando CSS Custom Properties no radial-gradient não é o suficiente para animar a transição com keyframes, no grupo do facebook me recomendaram o CSS.registerProperty e funcionou "magicamente".

Hoje o CSS.registerProperty tem suporte de 63% das sessões segundo o caniuse.com

Meu experimento com animação de gradiente radial

Ficou super fluído essa animação meus parabéns
Interessante usar os valores de custom properties em transition no elemento isso são regras css4 né?