As animações são essenciais para uma boa experiência do usuário (UX), servindo como guias visuais entre os estados de interação. No entanto, por muito tempo, propriedades CSS discretas, como display: none, popover e dialog, eram impossíveis de animar nativamente na entrada e saída sem “hacks” de JavaScript ou setTimeout.

Desde o final de 2024, essas funcionalidades alcançaram o status de Baseline, o que significa que agora você pode usá-las com segurança em todos os navegadores modernos (Chrome, Edge, Firefox e Safari).

O que mudou no CSS Moderno?

O segredo para animar o que antes era “inanimável” está em quatro novos recursos:

1. Animação de display: Agora pode ser incluído em @keyframes.
2. transition-behavior: allow-discrete: Permite que propriedades discretas (como display) participem de uma transição.
3. Regra @starting-style: Define o estado inicial de um elemento antes de sua primeira renderização no DOM.
4. Propriedade overlay: Mantém elementos da “Top Layer” (modais e popovers) visíveis até que a animação de saída termine.

1. Animando a Saída com Keyframes

Você pode incluir display: none diretamente no final de uma animação. O navegador garantirá que a mudança de exibição ocorra apenas após o término da animação.

.card {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}Code language: CSS (css)

2. Transições Suaves com allow-discrete

Se você prefere usar transition em vez de animation, a keyword allow-discrete é obrigatória. Ela faz com que o display mude apenas no final da transição de opacidade.

.card {
  transition: opacity 0.5s, display 0.5s;
  transition-behavior: allow-discrete;
}

.card.hidden {
  opacity: 0;
  display: none;
}Code language: CSS (css)

Dica de Especialista: Se estiver usando o shorthand transition, coloque allow-discrete ao final da propriedade específica:
transition: opacity 0.5s, display 0.5s allow-discrete;

3. O Desafio da Entrada: @starting-style

Como animar algo que acaba de sair de display: none?

O navegador normalmente não tem um “estado anterior” para calcular a transição. O @starting-style resolve isso:

@starting-style {
  .item {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s, transform 0.5s;
}Code language: CSS (css)

4. O “Segredo” dos Modais: A propriedade overlay

Ao trabalhar com <dialog> ou a Popover API, o elemento reside na Top Layer (uma camada acima de qualquer z-index). Se você animar a saída de um modal sem a propriedade overlay, ele desaparecerá da frente dos outros elementos instantaneamente, mesmo que a opacidade ainda esteja diminuindo.

dialog {
  transition: 
    opacity 0.5s, 
    display 0.5s allow-discrete, 
    overlay 0.5s allow-discrete;
}

dialog[open] {
  opacity: 1;
}

@starting-style {
  dialog[open] {
    opacity: 0;
  }
}Code language: CSS (css)

5. Exemplo Prático: Popover com Animação Completa

A Popover API é um dos casos de uso mais comuns para animações em propriedades discretas. Veja como criar um popover com entrada e saída animadas usando apenas CSS:

[popover] {
  opacity: 0;
  transform: scale(0.95) translateY(-10px);
  transition: 
    opacity 0.3s ease,
    transform 0.3s ease,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
}Code language: CSS (css)

Esse padrão elimina completamente a necessidade de bibliotecas JavaScript para animações de tooltips, dropdowns e menus contextuais.

Suporte dos Navegadores

Todos esses recursos fazem parte do Baseline 2024, o que significa suporte estável nos principais navegadores:

Recurso	Chrome	Edge	Firefox	Safari
transition-behavior: allow-discrete	117+	117+	129+	17.4+
@starting-style	117+	117+	129+	17.5+
overlay	117+	117+	129+	17.4+
Animar display em keyframes	116+	116+	129+	17.4+

Considerações de Acessibilidade

Sempre respeite as preferências do usuário. Se alguém configurou o sistema para reduzir movimentos, suas animações devem ser desativadas ou simplificadas:

@media (prefers-reduced-motion: reduce) {
  .item, .card, dialog, [popover] {
    transition: none !important;
    animation: none !important;
  }
}Code language: CSS (css)

Referências e Leitura Complementar

• MDN: transition-behavior — documentação oficial da propriedade
• MDN: @starting-style — como definir estilos iniciais para transições de entrada
• MDN: overlay — propriedade para manter elementos na Top Layer durante animações
• MDN: Popover API — API nativa para popovers sem JavaScript
• Chrome Developers: Entry and exit animations — guia detalhado com exemplos interativos

Conclusão

Em 2026, não há mais desculpas para transições bruscas de “aparece/desaparece”. Com @starting-style e allow-discrete, o CSS finalmente resolveu um dos problemas mais antigos do desenvolvimento front-end, reduzindo drasticamente a necessidade de bibliotecas externas para animações simples de UI.

Quer se aprofundar em CSS moderno? Confira meus outros posts sobre CSS moderno e front-end.