Cómo animar una marca de verificación de éxito
Cómo animar una marca que confirma una acción: trazo, tiempos, secuencia con la interfaz que la rodea y la señal accesible que no puede sustituir.
Idea clave
Una marca de éxito debe confirmar una acción completada, no celebrarla. Dibuja el trazo en un solo movimiento suave, o escala la forma desde su centro, y mantenlo breve. Deja que la interfaz que la rodea se asiente primero y después reproduce la marca. Acompáñala siempre con texto o una región viva, porque un visto animado no dice a un lector de pantalla que pasó algo.
Decide qué está confirmando la marca
Una marca tras guardar un formulario dice que los datos se aceptaron; tras un pago, dice que el pago pasó. Son promesas distintas y la animación no debe insinuar más certeza de la que tiene el sistema. Si el resultado sigue pendiente, muestra primero ese estado.
Dibuja el trazo en lugar de hacer saltar la forma
La animación más convincente recorre el trazo. En SVG, fija stroke-dasharray y stroke-dashoffset a la longitud del trazo y anima el desplazamiento hasta cero: la línea parece escribirse. Escalar el icono entero es más simple y funciona, pero se siente como una pegatina.
Secuénciala con el contenedor
La marca suele vivir dentro de un botón, una tarjeta o un diálogo. Si el contenedor sigue moviéndose, la marca compite con él. Asienta primero el contenedor y luego dibuja la marca; unos pocos fotogramas de relevo bastan para que se lea como un solo evento.
Mantenla breve
El usuario espera permiso para continuar, y una animación larga se convierte en un obstáculo. Dibuja el trazo rápido y deja que la interfaz siga. Si la aplicación permanece en pantalla, la marca puede quedarse quieta; no necesita bucle ni rebote.
Accesibilidad: dilo, no solo lo muestres
Quien usa lector de pantalla no ve el trazo. El estado de éxito necesita texto, una etiqueta actualizada o un anuncio de región viva. Evita que el visto sea la única diferencia entre éxito y error, porque el color y la forma se pasan por alto con facilidad.
Háptica y sonido son opcionales
En móvil, una vibración ligera puede reforzar la marca y algunas aplicaciones añaden un sonido corto. Ambos deben ser opcionales y respetar los ajustes del sistema. Nunca dejes que la animación sea la única confirmación de que la acción funcionó.
Fragmento de implementación en producción
/* Draw an SVG check by animating the dash offset */
.check path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: draw 320ms ease-out forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.check path {
animation: none;
stroke-dashoffset: 0;
}
}Principios clave para recordar
- Reproduce la marca de éxito solo cuando el resultado esté confirmado
- Dibujar el trazo SVG se lee mejor que hacer saltar el icono
- Asienta el contenedor y después anima la marca
- Mantenla breve, porque el usuario espera para continuar
- Anuncia el éxito también con texto o una región viva
Preguntas frecuentes
Fuentes
- stroke-dasharray — MDN Web Docs
- ARIA live regions — MDN Web Docs
- Understanding Success Criterion 2.3.3: Animation from Interactions — W3C WAI