⏱️ Duración estimada: 2 horas

Sesión 14 - CSS Transitions, Transforms y Animations

Contenidos de la Sesión

En esta sesión se han explicado las tres herramientas de CSS que permiten añadir movimiento y dinamismo a los elementos de una página: transition, transform y animation. También se ha visto cómo usar la propiedad individual rotate y scale (sin transform), el pseudo-elemento ::after para efectos de hover, y animation-play-state para pausar animaciones.

El ejemplo construido en clase se encuentra en la carpeta animations/, concretamente en los archivos index.html y style.css.

1. transition — Transiciones CSS

transition permite que los cambios de valor de una propiedad CSS se produzcan de forma gradual en lugar de instantánea. Cuando un elemento cambia de estado (por ejemplo, al hacer :hover), la transición anima el cambio.

Sintaxis

selector {
  transition: propiedad duración función-de-tiempo retardo;
}

Ejemplo: transición múltiple

En el ejemplo de clase, las secciones tienen tres propiedades animadas:

section {
  transition:
    transform 250ms linear 0ms,
    rotate 250ms linear 0ms,
    scale 250ms linear 0ms;
}

Y al hacer :hover esas propiedades cambian de valor, activando las transiciones:

section:hover {
  rotate: 90deg;
  scale: 1.1;
}

También se usó transition: all en los enlaces para animar todos los cambios a la vez:

a {
  display: inline-block;
  transition: all 250ms ease-in-out 0s;
}

a:hover {
  color: red;
  transform: translateY(-3px) rotate(363deg);
}

2. transform — Transformaciones CSS

transform aplica una o varias transformaciones geométricas a un elemento: rotaciones, traslaciones, escalados, etc. No afecta al flujo del documento: el espacio que el elemento ocupaba antes de la transformación se mantiene.

/* Una sola transformación */
.elemento {
  transform: rotate(45deg);
}

/* Varias transformaciones encadenadas */
a:hover {
  transform: translateY(-3px) rotate(363deg);
}

Las funciones de transform más habituales:

/* Ejemplo del enlace de clase */
a:hover {
  transform: translateY(-3px) rotate(363deg);
  /* primero sube 3px, luego hace casi una vuelta completa */
}

3. Propiedades individuales: rotate, scale y translate

CSS moderno permite escribir rotate, scale y translate como propiedades independientes en lugar de dentro de transform. Esto facilita animar sólo una de ellas con transition sin afectar a las demás.

/* Usando la propiedad individual (recomendado con transition) */
section {
  transition:
    rotate 250ms linear 0ms,
    scale 250ms linear 0ms;
}

section:hover {
  rotate: 90deg;
  scale: 1.1;
}

/* Equivalente con transform (más difícil de animar por separado) */
section:hover {
  transform: rotate(90deg) scale(1.1);
}

4. animation y @keyframes — Animaciones CSS

A diferencia de transition (que sólo reacciona a cambios de estado), animation permite crear secuencias de animación complejas que se reproducen automáticamente, en bucle, a la inversa, etc. La secuencia se define con @keyframes.

Definir la animación con @keyframes

@keyframes tembleque {
  0% {
    transform: translateX(4px);
  }

  50% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(4px);
  }
}

Aplicar la animación a un elemento

section {
  animation-name: tembleque;
  animation-duration: 100ms;
  animation-timing-function: linear;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

Shorthand animation

Todas las sub-propiedades se pueden escribir en una sola declaración:

section {
  /* name duration timing-function delay iteration-count direction fill-mode */
  animation: tembleque 100ms linear 0ms infinite normal;
}

5. animation-play-state — Pausar una animación

animation-play-state permite pausar (paused) o reanudar (running) una animación. Es muy útil para detener la animación cuando el usuario interactúa con el elemento:

/* La animación "tembleque" está activa en todas las secciones */
section {
  animation-name: tembleque;
  animation-iteration-count: infinite;
}

/* Al hacer hover sobre el h2 dentro de section, la animación se pausa */
section:hover > h2 {
  background-color: blue;
  animation-play-state: paused;
}

6. El pseudo-elemento ::after para efectos de hover

En el ejemplo de clase se usó ::after para crear un efecto de “barrido de color” sobre las secciones al hacer hover:

/* Estado inicial: el pseudo-elemento ocupa 0% de ancho (right: 100%) */
section::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 100%; /* el pseudo-elemento tiene ancho 0 */
  background-color: rgb(109, 26, 80);
  z-index: -1;
  transition: right 1s ease-in-out 0ms;
}

/* Estado hover: right pasa a 0, el pseudo-elemento ocupa el 100% */
section:hover::after {
  right: 0;
}

Resultado: al hacer hover sobre una sección, un color se extiende de izquierda a derecha en 1 segundo.

section {
  position: relative;
  overflow: hidden;
}

7. Diferencias entre transition y animation

8. Estructura de los archivos de la sesión

animations/
├── index.html   — Página con secciones animadas, links con transform y transiciones
└── style.css    — Estilos con transition, transform, rotate, scale, animation y @keyframes

Resumen

En esta sesión hemos aprendido:

• ✅ transition — anima cambios de valor de propiedades CSS al cambiar de estado
• ✅ transition-duration, transition-timing-function, transition-delay — controlan cómo ocurre la transición
• ✅ transform — aplica rotaciones, traslaciones y escalados sin afectar el flujo
• ✅ rotate(), translate(), translateX(), translateY(), scale() — funciones de transformación
• ✅ Propiedades individuales rotate, scale, translate — forma moderna de aplicar transformaciones con transition
• ✅ animation con @keyframes — animaciones complejas y en bucle sin necesidad de interacción del usuario
• ✅ animation-play-state — pausa o reanuda una animación
• ✅ ::after con transition — efecto de barrido de color mediante pseudo-elemento

Lo más importante:

Recursos Adicionales

• MDN - transition
• MDN - transform
• MDN - rotate (propiedad individual)
• MDN - scale (propiedad individual)
• MDN - translate (propiedad individual)
• MDN - animation
• MDN - @keyframes
• MDN - animation-play-state
• MDN - ::after
• CSS Tricks - A Guide to CSS Transitions
• CSS Tricks - A Guide to CSS Animations
• Josh Comeau - An Interactive Guide to CSS Transitions
• Josh Comeau - A Friendly Introduction to Spring Physics