Como criar animações CSS de alto desempenho

Kayce Basques

Rachel Andrew

Este guia ensina como criar animações CSS de alto desempenho.

Consulte Por que algumas animações estão lentas? para aprender a teoria por trás dessas recomendações.

Compatibilidade com navegadores

Todas as propriedades CSS recomendadas por este guia têm boa experiência suporte.

transform

opacity

will-change

Mover um elemento

Para mover um elemento, use os valores de palavra-chave translate ou rotation do transform.

Por exemplo, para deslizar um item para visualização, use translate.

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

Use rotate para girar elementos. O exemplo a seguir gira um elemento 360 graus.

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Redimensionar um elemento

Para redimensionar um elemento, use o valor da palavra-chave scale do propriedade transform.

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

Mudar a visibilidade de um elemento

Para mostrar ou ocultar um elemento, use opacity.

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Evitar propriedades que acionam layout ou pintura

Antes de usar qualquer propriedade CSS para animação (exceto transform e opacity), faça o seguinte: determinar o impacto da propriedade no pipeline de renderização. Evite qualquer propriedade que acione o layout ou pintura, a menos que seja absolutamente necessária.

Forçar criação de camadas

Como explicado em Por que algumas animações estão lentas?, o posicionamento de elementos em uma nova camada permite que o navegador os repinte sem precisar repintar o restante do layout.

Em geral, os navegadores conseguem tomar boas decisões sobre quais itens devem ser colocados em uma uma nova camada, mas é possível forçar manualmente a criação de camadas com a função propriedade will-change. Como o nome sugere, essa propriedade informa ao navegador que esse elemento será sejam alterados de alguma forma.

No CSS, é possível aplicar will-change a qualquer seletor:

body > .sidebar {
  will-change: transform;
}

No entanto, a especificação sugere que você só deve fazer isso para elementos que estão sempre prestes mudar. Por exemplo, isso pode ser verdade para uma barra lateral em que o usuário pode deslizar e para fora. Para elementos que não mudam com frequência, recomendamos aplicar will-change usando JavaScript quando uma mudança provavelmente vai acontecer. Não se esqueça de dê ao navegador tempo suficiente para realizar as otimizações necessárias e remova a propriedade quando a alteração for interrompida.

Se você forçar a criação de camadas em um navegador que não ofereça suporte a will-change. (provavelmente Internet Explorer), você pode definir transform: translateZ(0).

Depurar animações lentas ou com falhas

O Chrome DevTools e o Firefox DevTools têm muitas ferramentas para ajudar você a descobrir por que suas animações estão lentas ou com falhas.

Verificar se uma animação aciona o layout

Uma animação que move um elemento usando algo diferente de transform é provavelmente será lenta. O exemplo a seguir compara uma animação usando transform. a uma animação usando top e left.

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

É possível testar isso nos dois exemplos de Glitch abaixo, e analisar o desempenho usando o DevTools.

• Antes.
• Depois.

Chrome DevTools

1. Abra o painel Desempenho.
2. Gravar o desempenho da execução enquanto a animação acontece.
3. Inspecione a guia Resumo.

Caso veja um valor diferente de zero para Renderização na guia Resumo, ele pode significa que a animação está fazendo o navegador funcionar no layout.

.

DevTools do Firefox

No Firefox DevTools, use a opção Cascata. pode ajudar você a entender onde o navegador passa tempo.

1. Abra o painel Desempenho.
2. Comece a gravar a performance enquanto a animação está acontecendo.
3. Interrompa a gravação e inspecione a guia Cascata.

Se houver entradas para Recalcular estilo, isso significa que o navegador precisa retornar ao início hierarquia de renderização para renderizar a animação.

Verificar se há frames perdidos

1. Abra a guia Renderização no Chrome DevTools.
2. Marque a caixa de seleção Medidor de QPS.
3. Observe os valores enquanto a animação é executada.

Preste atenção no rótulo Frames na parte de cima da interface do medidor de QPS. Isso mostra valores como 50% 1 (938 m) dropped of 1878. Um protótipo de alta performance animação tem uma porcentagem alta, como 99%, o que significa que poucos frames são sendo solto e a animação parecerá suave.

Verificar se uma animação aciona a pintura

Algumas propriedades são mais caras para o navegador pintar do que outras. Para Por exemplo, qualquer coisa que envolva um desfoque (como uma sombra) precisa levar mais tempo para pintar do que desenhar uma caixa vermelha. Essas diferenças nem sempre são óbvias no CSS, mas o navegador DevTools pode ajudar a identificar quais áreas precisam ser repintado, bem como outros problemas de desempenho relacionados à pintura.

Chrome DevTools

1. Abra a guia Renderização no Chrome DevTools.
2. Selecione Paint Flashing.
3. Mova o ponteiro pela tela.

Se a tela inteira estiver piscando ou áreas destacadas que você não acredita deve mudar, investigue mais a fundo.

Se você precisa determinar se uma propriedade específica está causando problemas de desempenho relacionados à pintura, o criador de perfis de pintura no Chrome DevTools pode ajudar.

DevTools do Firefox

1. Abra Configurações e adicione um botão "Caixa de ferramentas" para Ativar o flash de pintura.
2. Na página que você quer inspecionar, ative o botão e mova o mouse ou role para ver as áreas em destaque.

Conclusão

Sempre que possível, restrinja as animações a opacity e transform para manter animações na etapa de composição do caminho de renderização. Use o DevTools para verificar qual estágio do caminho está sendo afetado pelas animações.

Use o gerador de perfis de pintura para ver se alguma operação de pintura é particularmente caro. Se você encontrar algo, verifique se outra propriedade CSS oferece a mesma aparência com um desempenho melhor.

Use a propriedade will-change com moderação e somente se você encontrar um problema de desempenho.