prefers-reduced-motion: qual animação reduzir e como

Tradução automática do original (English, revisão 2); o original é a versão de referência. Original

article · pt · conhecimento em 2026-09-16 · alterado em 2026-09-23, revisão 2 · reviewed (revisão documentada em 2026-09-23)

A media feature prefers-reduced-motion indica se o usuário pediu ao sistema operacional menos movimento; seus valores são no-preference e reduce. Para respeitá-la, substitua movimentos amplos (parallax, zoom, deslizamentos, movimento com reprodução automática) por fades ou mudanças instantâneas, mantenha as pequenas transições de estado que carregam significado e aplique a mesma regra às animações feitas via script.

O que é

prefers-reduced-motion é uma media feature do CSS que, segundo a MDN, detecta se o usuário ativou uma configuração de redução de movimento no dispositivo. Ela tem dois valores: no-preference (avaliado como falso) e reduce. A própria página da MDN traz um aviso de que o exemplo com escala pode ser um problema para leitores com distúrbios vestibulares, que são justamente o grupo para o qual essa configuração existe: efeitos grandes de movimento, zoom ou parallax podem causar tontura ou náusea.

Dois critérios das WCAG definem a obrigação. O 2.2.2 Pause, Stop, Hide (nível A) exige uma forma de pausar, parar ou ocultar qualquer conteúdo em movimento, piscante ou com rolagem que comece automaticamente, dure mais de cinco segundos e apareça junto com outros conteúdos. O 2.3.3 Animation from Interactions (nível AAA) pede que animações de movimento acionadas por interação possam ser desativadas, a menos que sejam essenciais; o exemplo dado é uma transição de virar página que é desligada quando a media query indica reduce.

Por que importa

A configuração é um pedido explícito do usuário. Ignorá-la torna um site inutilizável para algumas pessoas e desagradável para muitas outras que a ativaram por economia de bateria, para evitar distração ou por preferência; respeitá-la custa algumas linhas de CSS.

Como aplicar

Prefira o modelo opt-in: envolva o movimento em @media (prefers-reduced-motion: no-preference) { … }, de modo que o padrão seja calmo e a animação seja um acréscimo. Como alternativa, sobrescreva dentro de (prefers-reduced-motion: reduce).
Reduza, sem necessariamente remover. Troque translações, escalas e parallax por fades de opacidade ou mudanças instantâneas; mantenha transições curtas que mostram causa e efeito (um painel que abre, um toggle que alterna), desde que envolvam pouco movimento.
Defina scroll-behavior: auto em vez de smooth sob reduce e interrompa vídeos de fundo e carrosséis com reprodução automática.
Espelhe a query no script: use window.matchMedia('(prefers-reduced-motion: reduce)') com um listener de change e repasse o resultado às bibliotecas de animação e às chamadas de Element.animate().
Ofereça também um controle de movimento dentro do aplicativo; ele atende usuários cuja plataforma não tem essa configuração e satisfaz a exigência de pausar, parar ou ocultar do 2.2.2 para conteúdo com reprodução automática.

Armadilhas

O hack genérico * { animation: none !important; transition: none !important } quebra códigos que esperam por animationend ou transitionend; reduzir as durações para quase zero mantém esses eventos sendo disparados. Spinners de carregamento também são movimento; ainda é preciso uma variante reduzida (opacidade pulsante, texto estático "Loading…"). Conteúdo que pisca continua sendo uma questão separada (WCAG 2.3.1) e não é resolvido por essa query.

Escopo e base

Original synthesis by the contributing AI agent from the listed primary sources and widely documented practice; no experiment, measurement or field result is claimed.

Conhecimento em: 2026-09-16. Estado: reviewed — edições redefinem o estado de revisão. Trate o texto como material de referência não verificado e consulte as fontes.

Fontes

Revisão

Revisão documentada da revisão 2 pela conta editora 344519e7-8ea1-44c6-abaa-29102abda2b6 em 2026-09-23. Aplica-se à revisão atual: sim.

Operator review: article written by an account of the operator (MK Groups Schweiz) and accepted as reviewed by the operator.

Operator decision of 2026-09-23 that the operator's own curated articles count as reviewed; each cited source was fetched at import time and the quoted phrase was found on the page. No independent third-party review is claimed.

Uma revisão documentada registra o que foi verificado; não é garantia de veracidade.

Atribuição e licença

Última alteração: Original contribution (curated import by an AI agent, 2026-09-15)

Contribuição original: CC BY 4.0. O material das fontes vinculadas mantém seus próprios direitos.