Algumas coisas sobre Keyframes

Quer você mal tenha arranhado a superfície das animações de keyframes em CSS ou se considere um profissional experiente, sugiro ler An Interactive Guide to Keyframe Animations. Josh (como sempre) faz um mergulho profundo impecável que inclui demonstrações interativas para animações de várias etapas, loops, configuração de valores dinâmicos e muito mais.

Esta é uma postagem rápida que destaca alguns outros pequenos detalhes:

1. Propriedades de keyframes duplicadas
2. A ordem das regras do keyframes
3. Valores de função de temporização personalizada (facilitação) em keyframes específicos

Propriedades de keyframes duplicadas

Imagine uma animação de “aparência” onde um elemento desliza para baixo, aumenta de escala e muda de cor. O 0% keyframes inicial define a posição de deslocamento do eixo y do elemento e reduz o tamanho. Quando a animação é acionada, o elemento desliza para cima do deslocamento para sua posição central durante toda a duração da animação. Mais ou menos na metade, o tamanho do elemento começa a aumentar de escala e a cor de fundo muda. A princípio, podemos ficar tentados a duplicar as background-color propriedades e scaleem ambos os blocos de keyframes 0% e 50%.

@keyframes animate {
  0% {
    background-color: red;
    scale: 0.5;
    translate: 0 100%;
  }
  50% {
    background-color: red;
    scale: 0.5;
  }
  100% {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
}

Embora isso funcione corretamente, requer que gerenciemos as mesmas declarações de propriedade em dois locais. Em vez de repetir, podemos compartilhá-las em um conjunto de regras separado por vírgulas.

@keyframes animate {
  0% {
    translate: 0 100%;
  }
  0%, 50% {
    background-color: red;
    scale: 0.5;
  }
  100% {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
}

Ordem das regras do keyframes

Outra peculiaridade semi-interessante é que podemos reorganizar a ordem dos keyframes.

@keyframes animate {
  0% {
    translate: 0 100%;
  }
  100% {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
  /* Set and hold values until halfway through animation */
  0%, 50% {
    background-color: red;
    scale: 0.5;
  }
}

Só por diversão, aqui está uma versão que troca 0% e 100% pelos seus valores correspondentes from e to de palavras-chave.

@keyframes animate {
  from {
    translate: 0 100%;
  }
  to {
    background-color: green;
    scale: 1;
    translate: 0 0;
  }
  /* Set and hold values until halfway through animation */
  from, 50% {
    background-color: red;
    scale: 0.5;
  }
}

A seção “Resolving Duplicates” dos documentos do MDN menciona que @keyframesas regras não são cascateadas, o que explica por que essa ordem ainda retorna a animação esperada. Personalizar a ordem pode ser útil para agrupar alterações de propriedade dentro de um @keyframesbloco à medida que uma animação se torna mais complexa.

A mesma seção dos documentos do MDN também aponta que a cascata ocorre quando múltiplos keyframes definem os mesmos valores percentuais. Então, no @keyframesbloco seguinte, a segunda translatedeclaração substitui a primeira.

@keyframes animate {
  to {
    translate: 0 100%;
    rotate: 1turn;
  }
  to {
    translate: 0 -100%;
  }
}

Atenuação específica de Keyframes

Em “Funções de tempo para keyframes” da especificação CSS Animations Nível 1, descobrimos que a suavização pode ser ajustada dentro de um conjunto de regras de quadros-chave.

Uma regra de estilo de keyframes também pode declarar a função de tempo que será usada conforme a animação avança para o próximo quadro-chave.

Abra o painel CSS na demonstração do CodePen e procure pelo @keyframesbloco. Dentro de uma das porcentagens, uma suavização personalizada é aplicada usando a linear() função CSS para dar a cada elemento alguma oscilação ao pousar.

Acho que parece bem legal! Adicionar easing específico de keyframes traz uma camada extra de polimento e vitalidade às nossas animações. Um pequeno problema, no entanto: não podemos definir uma variável CSS como um animation-timing-functionvalor. Infelizmente, isso significa que não podemos acessar valores de easing personalizados compartilhados, digamos, de uma biblioteca ou sistema de design.

:root {
  --easeOutCubic: cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes {
  50% {
    animation-timing-function: var(--easeOutCubic);
  }
}