Herramientas de Animación

Inicio Animación y Motion Herramientas de Animación

Animación y Motion

Herramientas de Animación

3 reglas investigación 2026

Herramientas de Animación

3 reglas

408

CSS para micro-interacciones

CSS puro (transitions + @keyframes) es la herramienta correcta para micro-interacciones: hover, focus, toggle, confirmación de clic. Zero overhead de runtime, compuesto en GPU y respeta prefers-reduced-motion con una sola regla. Solo escalar a JS cuando se necesite lógica condicional en la animación.

investigación 2026

Preferir

Acciones del artículo

#r495-heart.liked495 {

border-color: #e11d48;

background: color-mix(in srgb,#e11d48 8%,transparent);

}

#r495-heart.liked495 svg { fill:#e11d48; stroke:#e11d48; }

@media(prefers-reduced-motion:reduce) { * { transition:none } }

Evitar

Acciones del artículo

btn.addEventListener('mouseenter', () => {

btn.style.background = '#fee2e2';

btn.style.borderColor = '#e11d48';

btn.style.transform = 'translateY(-1px)';

});

// Recalcula estilos en JS, trabajo del navegador

409

Lottie para ilustraciones lineales

Lottie es ideal para animaciones lineales de reproducción única o en bucle: onboarding, estados vacíos, confirmaciones, loaders decorativos. El archivo JSON es 10x más liviano que GIF equivalente y escala vectorialmente. No usar para animaciones reactivas al usuario, ahí Rive es superior.

investigación 2026

Preferir

Confirmación Pago exitoso, correo enviado

Loader Onboarding, procesando

Estado vacío Bandeja vacía, sin datos

Lottie JSON: ~8KB vs GIF equivalente ~450KB · escala en retina · colores controlables por CSS

Evitar

GIF

No hay mensajes

Tu bandeja esta vacía

GIF típico de estado vacío: 450KB, pixelado en 2x, imposible cambiar de color

410

Rive para state machines interactivas

Rive permite animar personajes, iconos o ilustraciones que reaccionan a inputs del usuario con lógica de state machine incorporada: hover, drag, toggle, progreso. Es más complejo que Lottie pero elimina la necesidad de coordinar JS + CSS para animaciones complejas reactivas.

investigación 2026

Preferir

CSS

CSS nativo, micro-interacciones simples

Cero runtime, GPU, reduced-motion gratis

hover shimmer spinners toggles fade / slide

LOT

Lottie, ilustraciones lineales

JSON vectorial, 10x vs GIF, sin interacción

onboarding estados vacíos confirmaciones loaders decorativos

Rive, state machines interactivas

Reacciona a hover/drag en tiempo real, lógica incorporada

personajes reactivos avatares con emoción gamificación

En esta página

R-408 CSS para micro-interacciones
R-409 Lottie para ilustraciones lineales
R-410 Rive para state machines interactivas