Transiciones en CSS desde cero: transition paso a paso

1. El disparador: qué hace que cambie el estado

Para que una transición ocurra necesitas un disparador: algo que provoque el paso del estado A al B. En JavaScript sería un evento, como un clic. En CSS es una pseudoclase como :hover, :focus o :checked, y con :has() ese cambio llega al elemento padre.

En el sidebar, el botón «Ocultar» es un checkbox. El selector pregunta: si .app tiene un .toggle__input marcado, cambia el sidebar. Ese es el estado final.

.app:has(.toggle__input:checked) .sidebar {
    background-color: red;
}

2. transition-property y transition-duration

transition-property define qué propiedades se animan. Su valor por defecto es all, pero con eso solo no ves nada: falta transition-duration, que dice cuánto dura. Acepta segundos (1s) o milisegundos (1000ms).

.sidebar {
    transition-property: all;
    transition-duration: 1000ms;
}

3. Mover elementos con transform: translate()

translate() mueve el elemento sin tocar el layout. El primer valor es el eje X (positivo a la derecha, negativo a la izquierda) y el segundo el eje Y (positivo hacia abajo, negativo hacia arriba). Con translateY(100%) lo bajas el 100 % de su propia altura.

Fíjate en que ahora transition-property nombra solo transform y opacity: es la forma recomendada.

.sidebar {
    transform: translateY(0);

    transition-property: transform, opacity;
    transition-duration: 1000ms;
}

.app:has(.toggle__input:checked) .sidebar {
    transform: translateY(100%);
}

4. transition-timing-function: cómo progresa la animación

Si la transición dura 2 segundos, en el segundo 2 siempre estará en su estado final. Lo que cambias con transition-timing-function es cómo progresa por el camino. Los valores por defecto son:

• ease (por defecto): arranca rápido y frena suave
• linear: velocidad constante
• ease-in: arranca lento y termina rápido
• ease-out: arranca rápido y frena al final
• ease-in-out: lento al inicio y al final

.sidebar {
    transition-property: transform, opacity;
    transition-duration: 1000ms;
    transition-timing-function: ease-in;
}

5. cubic-bezier() y linear(): curvas a tu medida

cubic-bezier() dibuja la curva de la animación con cuatro números. En la gráfica, el eje horizontal es el tiempo y el vertical, el progreso. Esta curva empieza muy lenta y termina de golpe:

transition-timing-function: cubic-bezier(1.00, 0.03, 0.76, 0.11);

Si un valor de Y se sale del rango 0–1, la animación retrocede y rebota antes de llegar al final:

transition-timing-function: cubic-bezier(0.31, -0.97, 0.69, 2.00);

linear() es otra forma de controlar la velocidad: le das puntos de progreso, donde 0 es el inicio y 1 el final. Aquí va al final, regresa al 25 % y vuelve a terminar:

transition-timing-function: linear(
    0,
    1,
    0.25,
    1
);

6. transition-delay: cuánto espera antes de empezar

transition-delay retrasa el inicio. Lo potente es darle un retraso distinto a cada propiedad, en el mismo orden que transition-property. Aquí el sidebar primero baja con transform y, un segundo después, se recorta con clip-path (el polígono sale del generador Clippy):

.sidebar {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform: translateY(0);

    transition-property: transform, clip-path;
    transition-duration: 1000ms;
    transition-timing-function: ease;
    transition-delay: 0s, 1s;
}

.app:has(.toggle__input:checked) .sidebar {
    transform: translateY(100%);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

7. El shorthand transition: todo en una línea

Todo lo anterior cabe en transition: propiedad, duración, función y retraso, separados por espacios, y cada propiedad separada por comas. Lo que coincide con el valor por defecto (ease, retraso 0s) no hace falta escribirlo.

transition: transform 1s, clip-path 1s 1s;

En cada propiedad, el primer tiempo es la duración y el segundo, el retraso: clip-path 1s 1s dura un segundo y espera otro antes de empezar. Esta línea hace exactamente lo mismo que las cuatro propiedades del paso anterior.

En el repositorio, la versión final va un paso más allá: cada estado tiene su propio transition. Al ocultarse, el sidebar primero baja y luego se recorta; al volver, primero se descubre y luego sube. La transición que se aplica es siempre la del estado al que vas.

.sidebar {
    transition: clip-path 1s 0s, transform 1s 1s;
}

.app:has(.toggle__input:checked) .sidebar {
    transform: translateY(300px);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: transform 1s 0s, clip-path 1s 1s;
}

8. Ejemplo avanzado: un buscador con popover

El atributo popover esconde el elemento y lo prepara para mostrarse después. El botón con popovertarget apunta al id del elemento que abre. Sin una línea de JavaScript:

<!-- Botón de buscar -->
<button class="search-btn" popovertarget="palette">
  Buscar
</button>

<!-- Buscador -->
<section class="palette" id="palette" popover>
  <search class="palette__search">
    <input type="search" autofocus placeholder="Escribe un comando o busca…">
    <kbd>esc</kbd>
  </search>
</section>

¿El problema? Por detrás, HTML pasa de display: none a display: block (con la pseudoclase :popover-open). Y display es una propiedad discreta: si le pones una transición, no pasa nada.

9. Animar display con transition-behavior: allow-discrete

transition-behavior: allow-discrete permite incluir display en la transición. En realidad no lo anima: retrasa el cambio a none lo que dure la transición, y eso da tiempo a que transform y opacity se animen al cerrar.

.palette {
  display: none;
  transform: translateY(100%);
  opacity: 0;

  transition-property: display, transform, opacity;
  transition-duration: .5s;
  transition-behavior: allow-discrete;
}

.palette:popover-open {
  display: block;
  transform: translateY(0);
  opacity: 1;
}

Si quitas transition-behavior, todo vuelve a ser de golpe. Con él, al cerrar, el buscador baja y se desvanece. En Chrome y Edge puedes añadir también overlay a transition-property para que el popover no salga de la capa superior antes de tiempo. Lo explico más a fondo en 3 características de CSS que no conocías.

10. @starting-style en CSS: la animación de entrada

Falta la entrada: de display: none a block no hay un estado anterior del que partir. @starting-style define los estilos que tiene el elemento justo antes de mostrarse, y desde ahí se anima.

.palette:popover-open {
  display: block;
  transform: translateY(0);
  opacity: 1;

  @starting-style {
    opacity: 0;
    transform: translateY(100%);
  }
}

Con esto el buscador entra desde abajo con un fundido y sale igual.

Resumen: transition = propiedad + duración + curva + retraso. Para animar display, allow-discrete. Para la entrada, @starting-style.