CSS 11: Transiciones y Animaciones

1. ¿Por Qué Animar en CSS?

Las transiciones y animaciones en CSS permiten crear experiencias visuales fluidas y atractivas sin necesidad de JavaScript. Son fundamentales para la UX moderna:

Feedback visual: Indica al usuario que algo está sucediendo (hover en botones, carga de contenido)
Guiar la atención: Dirige la mirada hacia elementos importantes
Suavizar cambios: Evita saltos bruscos entre estados
Personalidad: Da carácter y profesionalidad a tu sitio web

CSS vs JavaScript para Animar

Aspecto	CSS	JavaScript
Rendimiento	? Excelente (usa GPU)	?? Depende del código
Sencillez	? Muy fácil	?? Más complejo
Control preciso	?? Limitado	? Total
Casos de uso	Hovers, fadeIn, slides	Animaciones complejas, juegos

Regla de oro: Usa CSS siempre que puedas. Reserva JavaScript para lógica compleja.

2. Transiciones (Transitions)

Una transición es un cambio gradual entre dos estados de un elemento. Por ejemplo, cuando pasas el ratón sobre un botón y cambia de color suavemente en lugar de hacerlo de golpe.

Sintaxis Básica

Se aplica al elemento en su estado normal (no en :hover):

/* Sintaxis general */

.elemento {

  transition: propiedad duración función-tiempo retraso;

}



/* Ejemplo real */

.boton {

  background-color: #3498db;

  transition: background-color 0.3s ease;

}



.boton:hover {

  background-color: #e74c3c;

}

Las 4 Propiedades de Transition

Propiedad	Descripción	Valores comunes
`transition-property`	Qué propiedad(es) animar	`all`, `background-color`, `transform`
`transition-duration`	Cuánto dura la transición	`0.3s`, `500ms`, `1.5s`
`transition-timing-function`	Curva de aceleración	`ease`, `linear`, `ease-in-out`
`transition-delay`	Espera antes de empezar	`0s`, `0.5s`, `200ms`

Ejemplo: Control Total

/* Forma individual (más control) */

.caja {

  transition-property: background-color, transform;

  transition-duration: 0.3s, 0.5s;

  transition-timing-function: ease, ease-out;

  transition-delay: 0s, 0.1s;

}



/* Forma abreviada (más común) */

.caja {

  transition: background-color 0.3s ease,

              transform 0.5s ease-out 0.1s;

}

Hover aquí

?? Propiedades que SÍ se pueden Animar

No todas las propiedades CSS admiten transiciones. Funcionan las que tienen valores intermedios:

? opacity: de 0 a 1 (hay valores intermedios)
? transform: rotaciones, escalas, movimientos
? background-color: colores intermedios
? width, height: tamaños intermedios
? display: de none a block NO hay intermedios
? font-family: no se puede interpolar

Timing Functions (Curvas de Aceleración)

Controlan la velocidad durante la transición:

Pasa el ratón sobre esta sección para ver las diferencias:

linear

ease

ease-in

ease-out

ease-in-out

linear: Velocidad constante (robótico)
ease: (Por defecto) Empieza lento, acelera, termina lento
ease-in: Empieza lento, acelera al final
ease-out: Empieza rápido, desacelera al final (más natural)
ease-in-out: Empieza y termina lento, rápido en el medio

Cubic Bezier: Control Personalizado

Para curvas personalizadas, usa cubic-bezier():

.elemento {

  /* Rebote suave */

  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);

}



/* Herramienta recomendada: https://cubic-bezier.com */

3. Animaciones (Keyframes)

Mientras las transiciones van de un estado A a un estado B, las animaciones con keyframes pueden tener múltiples pasos intermedios y ejecutarse automáticamente (sin hover).

Estructura de una Animación

Se necesitan 2 partes:

Definir la animación con @keyframes
Aplicarla a un elemento con animation

/* 1. Definir la animación */

@keyframes nombre-animacion {

  from {

    /* Estado inicial */

    transform: translateX(0);

    opacity: 0;

  }

  to {

    /* Estado final */

    transform: translateX(100px);

    opacity: 1;

  }

}



/* 2. Aplicar la animación */

.elemento {

  animation: nombre-animacion 2s ease infinite;

}

Keyframes con Porcentajes

Para animaciones complejas, usa porcentajes en lugar de from / to:

@keyframes rebote {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-100px);

  }

  75% {

    transform: translateY(-50px);

  }

  100% {

    transform: translateY(0);

  }

}

Las 8 Propiedades de Animation

Propiedad	Descripción	Valores comunes
`animation-name`	Nombre del @keyframes	`rebote`, `fadeIn`
`animation-duration`	Duración total	`2s`, `500ms`
`animation-timing-function`	Curva de velocidad	`ease`, `linear`
`animation-delay`	Espera antes de empezar	`0s`, `1s`
`animation-iteration-count`	Cuántas veces repetir	`1`, `3`, `infinite`
`animation-direction`	Dirección de reproducción	`normal`, `reverse`, `alternate`
`animation-fill-mode`	Estado antes/después	`none`, `forwards`, `backwards`
`animation-play-state`	Pausar/reanudar	`running`, `paused`

Ejemplo: Propiedades Clave Explicadas

animation-iteration-count

.elemento {

  animation: giro 2s linear 3; /* Se repite 3 veces y para */

  animation: giro 2s linear infinite; /* Se repite para siempre */

}

animation-direction

.elemento {

  /* normal: 0% ? 100% (siempre en la misma dirección) */

  animation-direction: normal;

  

  /* reverse: 100% ? 0% (al revés) */

  animation-direction: reverse;

  

  /* alternate: 0% ? 100% ? 0% ? 100% (ping-pong) */

  animation-direction: alternate;

  

  /* alternate-reverse: 100% ? 0% ? 100% ? 0% */

  animation-direction: alternate-reverse;

}

normal: Vuelve al inicio de golpe

alternate: Va y vuelve suavemente

animation-fill-mode

Controla qué pasa antes de empezar y después de terminar:

.elemento {

  /* none (por defecto): No mantiene ningún estado */

  animation-fill-mode: none;

  

  /* forwards: Mantiene el último keyframe (100%) */

  animation-fill-mode: forwards;

  

  /* backwards: Aplica el primer keyframe (0%) antes de empezar */

  animation-fill-mode: backwards;

  

  /* both: forwards + backwards */

  animation-fill-mode: both;

}

Sintaxis Abreviada

/* Orden: name duration timing-function delay iteration-count direction fill-mode */

.elemento {

  animation: rebote 2s ease-in-out 0.5s infinite alternate forwards;

}



/* Múltiples animaciones */

.elemento {

  animation: fadeIn 1s ease,

             slideUp 0.5s ease 0.5s;

}

4. Transiciones vs Animaciones: ¿Cuándo Usar Cada Una?

Aspecto	Transiciones	Animaciones
Activación	Requiere evento (hover, cambio de clase)	Automática al cargar
Estados	Solo 2: inicio ? fin	Múltiples (0%, 25%, 50%, 100%...)
Control	Básico	Avanzado (repetir, dirección, etc.)
Casos de uso	Hovers, cambios de estado	Loaders, intros, efectos complejos

Ejemplos de Uso Real

Usa Transitions para:
- Botones hover
- Abrir/cerrar menús
- Cambios de tamaño en cards
Usa Animations para:
- Spinners de carga
- Animaciones de entrada (fadeIn, slideIn)
- Pulsos o latidos continuos
- Efectos de fondo animados

5. Ejemplos Prácticos Completos

Ejemplo 1: Botón con Efecto Profesional

.btn-pro {

  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  color: white;

  padding: 15px 40px;

  border: none;

  border-radius: 50px;

  font-size: 1.1em;

  cursor: pointer;

  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

  transition: transform 0.3s ease, 

              box-shadow 0.3s ease;

}



.btn-pro:hover {

  transform: translateY(-3px);

  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);

}



.btn-pro:active {

  transform: translateY(-1px);

  box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);

}

Ejemplo 2: Loader Infinito

@keyframes girar {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



.loader {

  width: 50px;

  height: 50px;

  border: 5px solid #f3f3f3;

  border-top: 5px solid #3498db;

  border-radius: 50%;

  animation: girar 1s linear infinite;

}

Ejemplo 3: FadeIn de Entrada

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.aparecer {

  animation: fadeIn 0.8s ease-out;

}

¡Aparezco suavemente!

Recarga la página para ver el efecto de nuevo

Ejemplo 4: Pulso Infinito

@keyframes pulso {

  0%, 100% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.1);

    opacity: 0.7;

  }

}



.notificacion {

  animation: pulso 2s ease-in-out infinite;

}

?? Nueva notificación

6. Buenas Prácticas y Rendimiento

? Propiedades Económicas (Usar siempre)

Estas propiedades no afectan el layout y usan la GPU:

transform: translate(), scale(), rotate()
opacity

/* ? BIEN: Usa transform */

.elemento:hover {

  transform: translateX(100px);

}



/* ? MAL: Usa left (provoca reflow) */

.elemento:hover {

  left: 100px;

}

?? Propiedades Costosas (Evitar animar)

Estas fuerzan al navegador a recalcular todo el layout:

width, height
top, left, right, bottom
padding, margin

Consejos Generales

Duraciones: 200-500ms para interacciones, 800ms para entradas

No abuses de all: Especifica qué animar

/* ? MAL */

transition: all 0.3s;



/* ? MEJOR */

transition: background-color 0.3s, transform 0.3s;

Accesibilidad: Respeta prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

Usa will-change solo si sabes que vas a animar:

.elemento {

  will-change: transform; /* Prepara la GPU */

}

7. Herramientas y Recursos

Cubic-bezier.com: Diseña curvas de timing personalizadas
Animista.net: Biblioteca de animaciones listas para copiar
Easings.net: Visualiza todas las timing functions
DevTools de Chrome: Inspector de animaciones (F12 ? Performance)

Siguiente paso: Explora la Colección de 100 Efectos para ver ejemplos visuales y copiar código.