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.
Ejemplo de animaciones fluidas con CSS keyframes
Contenido del Artículo
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%); }
}