Combina transiciones y animaciones con @keyframes para dar vida a la UI: hover suave, loaders, pulses y animaciones con control fino.
Las transiciones son ideales para cambios de estado (hover, focus).
Las animaciones con @keyframes sirven para movimientos complejos y repetibles.
Usa transform y opacity para mejor rendimiento.
Resumen con ideas principales para repasar rápido.
Define qué propiedad animar, la duración y el easing.
Usa transform para micro-interacciones sin coste elevado.
Define un recorrido y luego aplica animation con duración e iteraciones.
Prueba animation-direction: alternate para movimientos más orgánicos.
Combina transiciones y animaciones con @keyframes para dar vida a la UI: hover suave, loaders, pulses y animaciones con control fino.
Código del tema: transition: all 240ms ease;
Resumen con ideas principales para repasar rápido.
Cambios de estado suaves: hover, focus, active.
Secuencias de animación con pasos del 0% al 100%.
Controla el ritmo con ease, linear o cubic-bezier().
Anima transform y opacity para evitar repaints pesados.
Define qué propiedad animar, la duración y el easing.
Usa transform para micro-interacciones sin coste elevado.
.card {
transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 18px 30px -18px rgba(15, 23, 42, .35);
}Define un recorrido y luego aplica animation con duración e iteraciones.
Prueba animation-direction: alternate para movimientos más orgánicos.
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: .9; }
50% { transform: scale(1.08); opacity: 1; }
}
.badge {
animation: pulse 1.1s ease-in-out infinite;
}Resume la decisión técnica para animaciones fluidas y mantenibles en interfaces reales.
