Calculadora de Tempo de Animacao Segura para Vestibular em ms

Tempo Seguro de Animação (Vestibular)

Alguns usuários sentem náusea, tontura ou enxaqueca causadas por movimento na tela — especialmente parallax, zoom, translações grandes ou escala súbita. A WCAG 2.1 SC 2.3.3 (AAA) exige que qualquer animação de movimento não essencial possa ser desativada. Navegadores modernos expõem a preferência do usuário via media query CSS @media (prefers-reduced-motion: reduce), que deve desabilitar ou encurtar transições.

Como regra segura, mantenha animações abaixo de 300–500 ms para transições de UI e abaixo de 5 segundos para qualquer movimento contínuo sem controle de pausa. Efeitos de parallax são o gatilho mais comum de transtornos vestibulares. Organizações como AbleGamers e o W3C (incluindo as recomendações de animação do MathML) recomendam fornecer controles para autoplay, loop e movimento decorativo.

Aplicações

Use ao revisar splash screens, hero com parallax, scroll-jacking, carrosséis, entradas de modais, fundos com partículas, cutscenes de jogos e onboarding. Essencial para produtos inclusivos em saúde, educação e mercados com regulação de acessibilidade (EAA na UE, ADA nos EUA).

Perguntas frequentes

O que conta como movimento inseguro? Translações grandes pelo viewport, zoom-in/out, rotação 3D e parallax com forte diferencial de profundidade. Fades sutis e pequenos slides costumam ser seguros.

O “prefers-reduced-motion” resolve sozinho? Apenas para quem configurou. Muitos usuários não sabem que a opção existe, então limite durações e evite os efeitos mais agressivos por padrão.

5 segundos é limite rigoroso? É um teto prático da WCAG: se o movimento durar mais, você precisa oferecer mecanismo para pausar, parar ou ocultar.