Now in Baseline: como animar efeitos de entrada

Una Kravets

A postagem quatro novos recursos CSS para efeitos de entrada e saída compartilhou alguns recursos úteis que acabaram de ser lançados no Chrome. Agora, dois desses recursos, @starting-style e transition-behavior: allow-discrete, se tornaram os itens de referência recentemente disponíveis com o lançamento do Firefox 129. Agora você pode criar efeitos de animação de entrada para elementos, incluindo animações de display: none e animações na camada superior.

Configurando efeitos de entrada com o @starting-style

Compatibilidade com navegadores

  • 117
  • 117
  • 129
  • 17,5

Origem

A regra @starting-style define os estilos iniciais em um elemento antes que ele seja renderizado na página. Isso é necessário para elementos animados do display: none, porque eles precisam de um estado para a animação.

Use @starting-style como qualquer outra em-rule no CSS, colocando os estilos do elemento dentro dele. Por exemplo, com uma <dialog>, coloque os estilos dialog[open] dentro de uma regra @starting-style. Esses são os estilos usados antes da abertura da caixa de diálogo.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

Como ativar animações discretas com allow-discrete

Compatibilidade com navegadores

  • 117
  • 117
  • 129
  • 17,4

Origem

A segunda coisa necessária para oferecer suporte a animações de entrada para elementos animados usando display: none, como caixas de diálogo e pop-ups, é ativar um novo modo de animação para oferecer suporte à animação de propriedades distintas. Propriedades discretas são aquelas que não podem interpolar entre valores. Pense nisso como uma chave de ativação/desativação. Alguns exemplos incluem display, visibility, mix-blend-mode: qualquer propriedade em que o atributo é um valor ou outro. Com esse novo modo de animação, o navegador agora oferece suporte à troca de valores no ponto 50% em vez de no ponto 0% de uma transição.

Use uma das duas maneiras a seguir para animar os efeitos de entrada para elementos display: none e visibility: hidden:

  • A propriedade autônoma transition-behavior com o valor allow-discrete.
  • O valor allow-discrete na abreviação de transição.

Recomendamos o segundo método, porque a aplicação de transition-behavior está incluída na abreviação transition. Se você aplicar transition-behavior: allow-discrete antes da abreviação de transição em que está aplicando as funções de transição, tempo e easing, o navegador ignorará a transition-behavior.

Se estiver usando isso na abreviação, você só precisará aplicar a palavra-chave allow-discrete às propriedades específicas que exigem animações discretas. Isso é demonstrado no CSS a seguir, que faz a transição das propriedades translate e display, mas aplica apenas a palavra-chave allow-discrete à propriedade display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

Demonstração: como reunir tudo

O uso desses recursos é particularmente útil para elementos de camada superior, como o elemento <dialog> ou componentes que usam o atributo popover. No exemplo a seguir, um elemento <dialog> é animado da parte de baixo da janela de visualização (inicialmente começando com uma translação vertical de 100 vh fora da tela) até o centro da janela, removendo a translação quando a <dialog> estiver aberta.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

É possível escrever isso de maneira mais concisa com o aninhamento de CSS, que também é um recurso de referência recém-disponibilizado.

Compatibilidade com navegadores

  • 120
  • 120
  • 117
  • 17,2

Origem

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}
Animação de demonstração em um elemento de caixa de diálogo.

Conclusão

É empolgante ver um progresso como esse na linha de base e, pelo menos, é um aprimoramento progressivo para esses elementos. Sem esses recursos de efeito de entrada, os elementos animados na camada superior ou em um estilo display: none simplesmente aparecerão na página sem a transição, como já acontece atualmente.

Para aprender a adicionar efeitos de saída de forma progressiva, confira o artigo "Quatro novos recursos CSS para animações de entrada e saída suaves" e, para saber mais sobre esses recursos, confira os seguintes recursos de documentação: