🎬Dev

prefers-reduced-motion CSS

Gera snippet CSS @media (prefers-reduced-motion: reduce) para desativar animações.

Abrangência

CSS

—

Respeitar quem pediu menos movimento

Animação de entrada, rolagem suave e paralaxe são desconforto real para parte das pessoas: distúrbio vestibular, enxaqueca com aura e algumas formas de epilepsia reagem mal a movimento na tela. Por isso os sistemas operacionais têm a opção de reduzir movimento, e o navegador a expõe ao CSS pela media query prefers-reduced-motion.

A página monta o bloco que atende essa preferência. Escolha a abrangência: a versão de página inteira aplica a regra a todos os elementos e é a recomendação usual, porque pega inclusive animação de biblioteca de terceiros que você não escreveu; a versão restrita limita o efeito a uma classe, para quando existe animação que precisa continuar por transmitir informação.

Repare que as durações não vão a zero, e sim a um valor mínimo. É de propósito: animação com duração zero pode não disparar o evento de fim, e código que espera por esse evento para prosseguir travaria. Um centésimo de milissegundo é imperceptível e mantém o evento. O scroll-behavior também entra na lista, porque a rolagem suave é uma das queixas mais frequentes.

Perguntas frequentes

Isso desliga toda a animação do site?

Na versão de página inteira, praticamente sim — e é o comportamento desejado quando alguém pediu menos movimento no sistema. Se alguma animação for essencial para entender a interface, prefira reduzi-la a algo sutil, como uma transição de opacidade, em vez de mantê-la em movimento.

Como testo sem mexer no meu sistema?

Pelas ferramentas do navegador: no Chrome, em Rendering, há a opção de emular prefers-reduced-motion; o Firefox tem opção equivalente. Mudar de verdade a configuração do sistema também funciona — no macOS fica em Acessibilidade, e no Windows em Efeitos visuais.

Dá para consultar isso pelo JavaScript?

Dá, com matchMedia sobre a mesma consulta, e é o caminho quando a animação é feita em código e não em CSS. Vale registrar um ouvinte de mudança: a pessoa pode ligar a preferência com a página já aberta, e o certo é reagir na hora.

Ferramentas Relacionadas

🎯

Focus-Visible CSS Snippet

Gera snippet CSS focus-visible com cor de outline customizada (WCAG 2.4.7).

🔘

Gerador de Botão CSS

Crie botões CSS customizados: cor, texto, padding, border-radius, sombra e hover. Veja o preview em tempo real e copie o HTML+CSS pronto para colar no projeto. Tudo no navegador.

📐

Calculadora de Clamp CSS

Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.

🌬️

Gerador Tailwind Config (CLI)

Gere um tailwind.config.js pronto para usar com a Tailwind CLI, com paths de conteúdo e tema configurados. Copie e comece a estilizar em segundos.

🎨

Formatador CSS

Formate e indente código CSS para melhor legibilidade e manutenção.

🌈

Gerador de Gradiente CSS

Crie gradientes lineares e radiais para CSS com prévia em tempo real. Ajuste cores, posições e ângulo. Copie o código CSS com um clique.