DevHub Global Solutions | Educativo

Animaciones CSS: keyframes y transiciones fluidas

Domina el arte de las animaciones CSS para crear interfaces dinámicas y atractivas. Aprende desde transiciones sutiles hasta animaciones complejas con keyframes, garantizando rendimiento y fluidez.
Animaciones CSS: keyframes y transiciones fluidas
Ejemplo de animaciones fluidas con CSS keyframes

Transiciones CSS

Anima cambios de estado de forma suave:

/* Transición básica */
.boton {
  background: #3498db;
  transition: background 0.3s ease, transform 0.2s 0.1s;
}

.boton:hover {
  background: #2980b9;
  transform: scale(1.05);
}

/* Transición con curva personalizada */
.menu-item {
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

Prefiere transform y opacity para animaciones de alto rendimiento (evita animar propiedades como height o margin)

Propiedad Descripción Valores Comunes
transition-property Qué propiedades animar all, opacity, transform
transition-duration Duración de la animación 0.3s, 500ms
transition-timing-function Curva de aceleración ease, linear, ease-in-out, cubic-bezier()
transition-delay Retardo antes de iniciar 0s, 200ms

Animaciones con @keyframes

Crea secuencias complejas con múltiples pasos:

/* Definición de keyframes */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  70% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplicando animación */
.elemento {
  animation: 
    slideIn 0.8s ease-out forwards,
    pulse 2s infinite 1s;
}

/* Animación pausable */
.elemento:hover {
  animation-play-state: paused;
}

Técnicas Avanzadas

Optimización y efectos profesionales:

Will-change

will-change: transform para optimizar rendimiento

Animaciones escalonadas

transition-delay incremental para efectos en cadena

Morphing

clip-path para transformaciones complejas

Scroll-linked

@scroll-timeline para animaciones basadas en scroll

/* Animación escalonada */
.item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
}

.item:nth-child(1) { transition-delay: 0.1s; }
.item:nth-child(2) { transition-delay: 0.2s; }
.item:nth-child(3) { transition-delay: 0.3s; }

.contenedor:hover .item {
  opacity: 1;
  transform: translateY(0);
}

/* Animación con clip-path */
@keyframes morph {
  0% { clip-path: circle(0% at 50% 50%); }
  100% { clip-path: circle(100% at 50% 50%); }
}
AR

Sobre el autor

Diseñadora de interacción especializada en animaciones web. Creadora de la librería 'Motion.css' con más de 10k estrellas en GitHub.