Skip to content
Logo de la documentación HoneyCode

10. Transiciones y Animaciones

Transiciones y Animaciones en CSS permiten crear movimiento y dinamismo en las interfaces web, mejorando la experiencia del usuario con efectos suaves y atractivos.

🔄 Transiciones (transition)

Section titled “🔄 Transiciones (transition)”

transition - Efectos suaves entre estados

Section titled “transition - Efectos suaves entre estados”

Las transiciones crean cambios suaves entre valores de propiedades CSS cuando cambia el estado de un elemento.

.elemento {
  transition: property duration timing-function delay;


  /* Ejemplos */
  transition: all 0.3s ease;
  transition: background-color 0.5s ease-in-out;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);


  /* Múltiples propiedades */
  transition: background-color 0.3s, transform 0.5s, opacity 0.2s;
}
/* Sintaxis completa */
.elemento {
  transition-property: background-color;  /* Qué animar */
  transition-duration: 0.3s;              /* Duración */
  transition-timing-function: ease;       /* Curva de tiempo */
  transition-delay: 0s;                   /* Retraso */
}


/* Shorthand (forma corta) */
.elemento {
  transition: background-color 0.3s ease 0s;
}


/* Timing functions (funciones de tiempo) */
.elemento {
  transition-timing-function: ease;           /* Suave (default) */
  transition-timing-function: linear;         /* Lineal */
  transition-timing-function: ease-in;        /* Acelera al inicio */
  transition-timing-function: ease-out;       /* Desacelera al final */
  transition-timing-function: ease-in-out;    /* Acelera y desacelera */
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Personalizada */
}


/* Animar todas las propiedades */
.elemento {
  transition: all 0.3s ease;
}

Parámetros:

  • ✅ property - Propiedad a animar (all, background, transform, etc.)
  • ✅ duration - Duración (0.3s, 500ms)
  • ✅ timing-function - Curva de animación
  • ✅ delay - Retraso antes de iniciar (opcional)

🎬 Animaciones (@keyframes)

Section titled “🎬 Animaciones (@keyframes)”

animation y @keyframes - Animaciones complejas

Section titled “animation y @keyframes - Animaciones complejas”

Las animaciones permiten crear secuencias de movimiento con múltiples pasos usando @keyframes.

/* Definir la animación */
@keyframes nombre-animacion {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  50% {
    transform: translateX(100px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}


/* Aplicar la animación */
.elemento {
  animation: nombre-animacion 2s ease-in-out infinite;
}
/* Sintaxis completa */
.elemento {
  animation-name: nombre-animacion;           /* Nombre del @keyframes */
  animation-duration: 2s;                     /* Duración */
  animation-timing-function: ease-in-out;     /* Curva de tiempo */
  animation-delay: 0s;                        /* Retraso */
  animation-iteration-count: infinite;        /* Repeticiones (número o infinite) */
  animation-direction: normal;                /* Dirección (normal, reverse, alternate) */
  animation-fill-mode: forwards;              /* Estado final (forwards, backwards, both) */
  animation-play-state: running;              /* Estado (running, paused) */
}


/* Shorthand (forma corta) */
.elemento {
  animation: nombre 2s ease-in-out 0s infinite normal forwards;
}


/* @keyframes con porcentajes */
@keyframes slide {
  0% { transform: translateX(0); }
  25% { transform: translateX(100px); }
  50% { transform: translateX(100px) translateY(50px); }
  75% { transform: translateX(0) translateY(50px); }
  100% { transform: translateX(0) translateY(0); }
}


/* @keyframes con from/to */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

Parámetros:

  • ✅ name - Nombre del @keyframes
  • ✅ duration - Duración (2s, 500ms)
  • ✅ timing-function - Curva de animación
  • ✅ delay - Retraso antes de iniciar
  • ✅ iteration-count - Número de repeticiones (infinite)
  • ✅ direction - Dirección (normal, reverse, alternate)
  • ✅ fill-mode - Estado final (forwards, backwards, both)

♾️ Animaciones Infinitas y por Pasos

Section titled “♾️ Animaciones Infinitas y por Pasos”

Animaciones infinitas

Section titled “Animaciones infinitas”

Animaciones que se repiten continuamente usando animation-iteration-count: infinite.

.elemento {
  animation: nombre 2s ease-in-out infinite;
  /* Se repite infinitamente */
}


/* Animación alternada (va y viene) */
.elemento {
  animation: nombre 2s ease-in-out infinite alternate;
  /* Va hacia adelante y luego hacia atrás */
}

Animaciones por pasos (steps)

Section titled “Animaciones por pasos (steps)”

Animaciones que avanzan en pasos discretos en lugar de suaves.

.elemento {
  animation: nombre 1s steps(4) infinite;
  /* Avanza en 4 pasos discretos */
}


/* Útil para sprites */
.sprite {
  animation: sprite-walk 0.8s steps(8) infinite;
}


@keyframes sprite-walk {
  from { background-position: 0 0; }
  to { background-position: -800px 0; }
}
/* Animación infinita normal */
.loader {
  animation: spin 1s linear infinite;
}


/* Animación infinita alternada */
.pulse {
  animation: pulse 2s ease-in-out infinite alternate;
}


/* Animación por pasos */
.sprite {
  animation: walk 1s steps(8) infinite;
}


/* Animación con retraso */
.delayed {
  animation: fade 1s ease 2s infinite;
  /* Espera 2s antes de cada repetición */
}


/* Múltiples animaciones */
.complex {
  animation:
    spin 2s linear infinite,
    pulse 1s ease-in-out infinite alternate;
}

🎯 Estados Dinámicos (hover, active, focus)

Section titled “🎯 Estados Dinámicos (hover, active, focus)”

Pseudo-clases para interactividad

Section titled “Pseudo-clases para interactividad”

Las pseudo-clases permiten aplicar estilos cuando el elemento está en un estado específico.

/* :hover - Cuando el cursor está sobre el elemento */
.boton:hover {
  background-color: #2ecc71;
  transform: scale(1.05);
}


/* :active - Cuando se está haciendo clic */
.boton:active {
  transform: scale(0.95);
}


/* :focus - Cuando el elemento tiene el foco */
input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}


/* :focus-visible - Foco solo con teclado */
button:focus-visible {
  outline: 2px solid #3498db;
}
/* :hover - Mouse sobre el elemento */
.card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  transition: all 0.3s ease;
}


/* :active - Elemento siendo clickeado */
.button:active {
  transform: scale(0.95);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* :focus - Elemento con foco (input, button) */
input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}


/* :focus-within - Contenedor con hijo enfocado */
.form-group:focus-within {
  background-color: #f8f9fa;
}


/* :disabled - Elemento deshabilitado */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* :checked - Checkbox/radio seleccionado */
input[type="checkbox"]:checked {
  background-color: #2ecc71;
}


/* Combinaciones */
.button:hover:not(:disabled) {
  background-color: #2ecc71;
}

Pseudo-clases principales:

  • ✅ :hover - Mouse sobre el elemento
  • ✅ :active - Elemento siendo clickeado
  • ✅ :focus - Elemento con foco (teclado/click)
  • ✅ :focus-visible - Foco solo con teclado
  • ✅ :focus-within - Contenedor con hijo enfocado
  • ✅ :disabled - Elemento deshabilitado
  • ✅ :checked - Input seleccionado

🎓 Resumen

Section titled “🎓 Resumen”

🚀 Próximos pasos

Section titled “🚀 Próximos pasos”

Ahora que dominas transiciones y animaciones, puedes:

  • ✅ Crear interfaces interactivas y dinámicas
  • ✅ Implementar loaders y spinners personalizados
  • ✅ Mejorar la UX con feedback visual
  • ✅ Crear animaciones complejas con @keyframes
🐝