A regra CSS @starting-style

Definição e uso

CSS @starting-style A regra define o estilo inicial do elemento antes de ele obter sua primeira atualização de estilo.

Isso pode ser usado para criar transições suaves de entrada e saída para elementos como pop-ups, modais ou qualquer elemento que mude do estado display: none para visível.

Exemplo

Exemplo 1

Usar @starting-styleDeixe a caixa começar com opacidade 0 e cair da parte superior:

.box {
  width: 150px;
  height: 150px;
  background-color: pink;
  opacity: 1;
  transition: all 0.9s ease;
  @starting-style {
    opacity: 0;
    translate: 0 -80px;
  }
}

Experimente você mesmo

Exemplo 2

Usado em pop-ups e diálogos @starting-style:

#myPopover {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}
#myDialog {
  transition: opacity 0.5s ease-in, scale 0.5s ease-in;
  @starting-style {
    opacity: 0;
    scale: 1.1;
  }
}

Experimente você mesmo

Sintaxe CSS

@starting-style {
  declaração css;
}

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a regra @ pela primeira vez.