La regla @starting-style

Es muy probable que creando transiciones te hayas encontrado en la situación que al cargar la página te gustaría que un elemento tuviera un estilo diferente, para que no se produzca un salto o suavizar la aparición de un elemento.

La regla @starting-style

Para ello, y en otras situaciones donde quieres que ciertos elementos tengan inicialmente un valor diferente, puedes utilizar la regla @starting-style. Es una regla CSS que permite indicar los estilos que va a tener inicialmente un elemento de la página y de esta forma, evitar este comportamiento (o forzarlo, si interesa):

.element {
  width: 50px;
  height: 50px;
  background: indigo;
  transition:
    opacity 2s,
    width 1s,
    height 1s;
}

.element:hover {
  background: black;
  width: 150px;
  height: 150px;
}

@starting-style {
  .element {
    opacity: 0;
  }
}

<div class="element"></div>

En este caso, estamos creando un elemento con un tamaño inicial de 50x50 que transiciona a 150x150 cuando mueves ratón encima. Añadiéndole el @starting-style con un opacity: 0, conseguiremos que el elemento aparezca cuando carga la página, y luego permita hacer transiciones diferentes.

La regla @starting-style con nesting

Si tenemos en cuenta la anidación o nesting CSS, en lugar de añadir la regla @starting-style como un bloque independiente e incluir un selector, podemos añadirla dentro del selector concreto y utilizarla directamente:

.element {
  width: 50px;
  height: 50px;
  background: indigo;
  transition:
    opacity 2s,
    width 1s,
    height 1s;

  @starting-style { opacity: 0 }
}

Esto hará que el código sea mucho más fácil de modificar y mantener.

Añadir elementos al DOM

Esta regla también es muy útil cuando trabajamos con Javascript y queremos transicionar de forma suave los elementos que añadimos al DOM mediante Javascript.

Observa el siguiente ejemplo donde, cada vez que hacemos click en la página, se añade un cuadradito a la misma. Ten en cuenta que se aplicará la trasición de opacidad, permitiendo la de escalado cuando mueves el ratón sobre un elemento:

html,
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.element {
  width: 50px;
  height: 50px;
  background: indigo;
  transition:
    opacity 0.5s,
    transform 0.25s;

  @starting-style { opacity: 0 }
}

.element:hover {
  transform: scale(1.5);
  background: gold;
}

document.body.addEventListener("click", () => {
  const element = document.createElement("div");
  element.classList.add("element");
  document.body.append(element);
});