Então, você gostaria de animar a propriedade de exibição

O Grupo de Trabalho CSS dei um sinal de positivo algumas semanas atrás. A proposta conceitual super-duper é que podemos animar ou fazer a transição de, digamos, display: block para display: none.

É um pouco complicado raciocinar sobre isso porque a configuração display: none em um elemento cancela as animações. E adicioná-lo reinicia as animações. Pela especificação:

Configurando o display propriedade para none encerrará qualquer animação em execução aplicada ao elemento e seus descendentes. Se um elemento exibir nenhum, atualizar a exibição para um valor diferente de none iniciará todas as animações aplicadas ao elemento pelo animation-name propriedade, bem como todas as animações aplicadas aos descendentes com display exceto none.

Esse comportamento circular é o que torna o conceito aparentemente morto na chegada. Mas if @keyframes suportado qualquer display valor exceto none, então não há como none para cancelar ou reiniciar as coisas. Isso dá não-none prioridade de valores, permitindo none para fazer seu trabalho somente após a conclusão da animação ou transição.

de Miriam toot (isso é o que realmente estamos chamando, certo?) explica como isso pode funcionar:

Não estamos exatamente interpolando entre, digamos, block e none, mas permitindo block para permanecer intacto até o momento em que as coisas param de se mover e é seguro aplicar none. Essas são palavras-chave, então não há valores explícitos entre as duas. Como tal, esta continua a ser uma animação discreta. Estamos alternando entre dois valores assim que a animação estiver concluída.

Este é o Roberto Flackexemplo de puxado diretamente de a discussão:

@keyframes slideaway {
  from { display: block; }
  to { transform: translateY(40px); opacity: 0;}
}

.hide {
  animation: slideaway 200ms;
  display: none;
}

Este é um exemplo útil porque mostra como o primeiro quadro define o elemento para display: block, que tem prioridade sobre o subjacente display: none como um nãonone valor. Isso permite que a animação seja executada e finalizada sem none cancelando ou resetando no processo já que só resolve depois de a animação.

Este é o exemplo que Miriam mencionou no Mastodon:

.hide {
  transition: opacity 200ms, display 200ms;
  display: none;
  opacity: 0;
}

Estamos lidando com uma transição desta vez. O subjacente display o valor está definido para none antes que algo aconteça, então está completamente fora do fluxo de documentos. Agora, se fôssemos fazer a transição em hover, talvez assim:

.hide:hover {
  display: block;
  opacity: 1;
}

…então o elemento deveria teoricamente desaparecer em 200ms. Mais uma vez, estamos alternando entre display valores, mas block recebe prioridade para que a transição não seja cancelada antecipadamente e seja aplicada depois opacity termina sua transição.

Pelo menos é assim que minha mente está lendo isso. Fico feliz que haja pessoas superinteligentes pensando nessas coisas, porque imagino que haja muito para resolver. Por exemplo, o que acontece se várias animações forem atribuídas a um elemento - será none redefinir ou cancelar algum deles? Tenho certeza de que tudo, desde animações infinitas, direções invertidas e todo tipo de outras coisas, será resolvido a tempo.

Mas que primeiro passo super legal!