Transiciones y Animaciones

Dale vida a tu UI con transition, transform y @keyframes para crear efectos fluidos.

📖

Teoría

Transiciones suavizan los cambios de estado (hover, focus, etc.):
transition: propiedad duración función-tiempo delay;

Transform modifica la forma/posición visualmente sin afectar el layout:

scale(1.05) → escala

translateX(-10px) → mueve horizontalmente

rotate(45deg) → rota

@keyframes + animation crean animaciones repetitivas o complejas.

css

/* Transición en hover */
.btn {
  background: #4F8EF7;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn: hover{
  background: #3a7de8;
  transform: translateY(-2px); /* sube 2px */
}

/* Animación con keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card {
  animation: fadeIn 0.4s ease forwards;
}

/* Loader girando */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}

⚡

Ejercicio práctico

🎯 Tu misión

Crea una colección de botones y elementos animados: botón con hover que sube y cambia de color, tarjeta que se escala al hover, y un spinner de carga animado con @keyframes.

Vista previa

←Capítulo anterior

Siguiente capítulo→