Regla CSS @starting-style

Definición y uso

CSS @starting-style La regla se utiliza para definir el estilo inicial del elemento antes de que este reciba su primera actualización de estilo.

Esto se puede usar para crear transiciones suaves de entrada y salida para elementos como cuadros de diálogo emergentes, cuadros modales o cualquier elemento que cambie de estado display: none a visible.

Ejemplo

Ejemplo 1

Uso @starting-styleHacer que la caja comience con una opacidad de 0 y caiga desde la parte superior:

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

Prueba personal

Ejemplo 2

Uso en cuadros de diálogo y ventanas emergentes @starting-style:

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

Prueba personal

Sintaxis CSS

@starting-style {
  Declaración CSS;
}

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que completamente admite la regla @.