Como criar animações CSS de alto desempenho

Kayce Basques

Rachel Andrew

Este guia ensina como criar animações CSS de alta performance.

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

Compatibilidade com navegadores

Todas as propriedades CSS recomendadas neste guia têm bom suporte entre navegadores.

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

Mover um elemento

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

Por exemplo, para deslizar um item para a 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 em 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 de palavra-chave scale da transform propriedade.

.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;
  }
}

**Observação** :encontre exemplos de copiar e colar de várias animações no Animista.

Evitar propriedades que acionam layout ou pintura

Antes de usar qualquer propriedade CSS para animação (que não seja transform e opacity), determine o impacto da propriedade no pipeline de renderização. Evite qualquer propriedade que acione layout ou pintura, a menos que seja absolutamente necessário.

Aviso:se você precisar usar uma propriedade que acione layout ou pintura, provavelmente não será possível manter a animação suave ou de alta performance.

Forçar a criação de camadas

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

Os navegadores geralmente podem tomar boas decisões sobre quais itens devem ser colocados em uma nova camada, mas você pode forçar manualmente a criação de camadas com a will-change propriedade. Como o nome sugere, essa propriedade informa ao navegador que esse elemento será alterado de alguma forma.

**Cuidado** :como a criação de camadas pode causar outros problemas de performance, não recomendamos usá-la no início do processo de otimização. Em vez disso, use-o apenas se notar problemas gráficos e achar que promover um elemento para uma nova camada pode ajudar.

No CSS, você pode aplicar will-change a qualquer seletor:

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

No entanto, a especificação sugere que você só adicione isso a elementos que estão sempre prestes a mudar. Por exemplo, isso pode ser usado para uma barra lateral que o usuário pode deslizar para dentro e para fora. Se o elemento não mudar com frequência, aplique will-change usando JavaScript quando uma mudança for provável. Dê ao navegador tempo suficiente para realizar as otimizações necessárias e remova a propriedade quando a mudança parar.

Para forçar a criação de camadas em um navegador sem suporte a will-change, defina transform: translateZ(0).

Depurar animações lentas ou com falhas

O Chrome DevTools e o Firefox DevTools podem ajudar você a descobrir por que suas animações sã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.

O que não fazer

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

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

O que fazer

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

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

Você pode testar isso nos dois exemplos a seguir e explorar a performance usando o DevTools.

• Antes, com animação top e left.
• Depois, com transform.

Chrome DevTools

1. Abra o painel Performance.
2. Grave a performance de execução enquanto a animação está acontecendo.
3. Inspecione a guia Summary.

Se você vir um valor diferente de zero para Rendering na guia Summary, isso pode significar que a animação está fazendo com que o navegador faça o trabalho de layout.

O exemplo de animation-with-top-left causa trabalho de renderização.

O exemplo de animação com transformação não causa trabalho de renderização.

Firefox DevTools

No Firefox DevTools, a cascata pode ajudar você a entender onde o navegador está gastando tempo.

1. Abra o painel Performance.
2. Comece a gravar a performance enquanto a animação está acontecendo.
3. Pare a gravação e inspecione a guia Waterfall.

Se você vir entradas para Recalculate Style, isso significa que o navegador precisa retornar ao início da cascata de renderização para renderizar a animação.

Verificar se há frames descartados

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

Preste atenção ao rótulo Frames na parte de cima da interface do FPS meter. Isso mostra valores como 50% 1 (938 m) dropped of 1878. Uma animação de alta performance tem uma porcentagem alta, como 99%, o que significa que poucos frames estão sendo descartados e a animação parece suave.

O exemplo de animation-with-top-left faz com que 50% dos frames sejam descartados

O exemplo de animação com transformação faz com que apenas 1% dos frames sejam descartados.

Verificar se uma animação aciona a pintura

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

Chrome DevTools

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

Neste exemplo do Google Maps, você pode ver os elementos sendo repintados.

Se você vir a tela inteira piscando ou áreas destacadas que não acha que deveriam mudar, investigue mais.

Se você precisar determinar se uma propriedade específica está causando problemas de performance relacionados à pintura, o Paint Profiler no Chrome DevTools pode ajudar.

Firefox DevTools

1. Abra Settings e adicione um botão da caixa de ferramentas para ativar/desativar o Paint Flashing.
2. Na página que você quer inspecionar, ative o botão e mova o mouse ou role para ver as áreas destacadas.

Animar na fase de composição

Sempre que possível, restrinja as animações a opacity e transform para manter as animações na fase 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 Paint Profiler para verificar se alguma operação de pintura é particularmente cara. Se você encontrar algo, verifique se uma propriedade CSS diferente oferece a mesma aparência com melhor performance.

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