# Prefers reduced motion: animação que todo mundo pode usar

[Canonical HTML page](https://gradiently.design/pt-br/guide/reduced-motion)

Para algumas pessoas, uma rolagem com parallax ou um banner que dá zoom não encanta; dá tontura. Uma configuração diz quem elas são. Veja como respeitá-la sem perder o seu design.

## The short version

- prefers-reduced-motion é um recurso de mídia do CSS que informa se a pessoa pediu ao aparelho para reduzir movimentos não essenciais.
- As pessoas ativam o movimento reduzido por vários motivos, entre eles distúrbios vestibulares, em que o movimento na tela pode causar tontura, náusea ou dor de cabeça.
- Movimento reduzido não precisa significar nenhum movimento: troque grandes movimentos como deslizes, zooms e parallax por esmaecimentos suaves e pare os loops automáticos.
- Um padrão confiável é escrever primeiro o design parado e acrescentar movimento só dentro de uma media query prefers-reduced-motion: no-preference.
- Todo sistema operacional tem uma configuração de reduzir movimento, então você pode testar o seu site ativando-a.

**Prefers reduced motion**, escrito `prefers-reduced-motion` em CSS, é um recurso de mídia que avisa ao seu site que a pessoa pediu ao aparelho para reduzir movimentos não essenciais. Quando ele informa `reduce`, você deve acalmar a página: parar os loops automáticos, trocar deslizes, zooms e parallax por esmaecimentos suaves ou por nada e mostrar versões paradas dos fundos animados. É pouco trabalho, e torna o site usável para pessoas que, de outra forma, sairiam dele passando mal.

## Para quem é o movimento reduzido

Algumas pessoas têm distúrbios vestibulares, que afetam o ouvido interno e a percepção de equilíbrio e movimento do cérebro. Para elas, movimentos grandes na tela, sobretudo parallax, zoom e elementos deslizando por áreas grandes, podem provocar tontura, náusea, dor de cabeça ou desorientação. Outras acham o movimento constante distrativo, têm enxaqueca ou simplesmente preferem uma tela mais calma. Todas usam a mesma chave nas configurações do aparelho, e não deveriam ter que explicar por quê.

| Aparelho | Onde fica a configuração |
| --- | --- |
| Mac | Ajustes do Sistema, Acessibilidade, Tela, Reduzir movimento |
| iPhone e iPad | Ajustes, Acessibilidade, Movimento, Reduzir Movimento |
| Windows 11 | Configurações, Acessibilidade, Efeitos visuais, Efeitos de animação (desativado) |
| Android | Configurações, Acessibilidade, Remover animações (o caminho varia conforme o fabricante e a versão) |

Os navegadores leem essas configurações e as informam ao seu site por meio de prefers-reduced-motion.

## O que reduzir e o que pode ficar

Movimento reduzido não é o mesmo que nenhum movimento. O objetivo é remover o movimento que simula deslocamento pelo espaço ou ocupa grandes partes da tela e parar tudo o que toca sozinho. Respostas pequenas e rápidas e esmaecimentos simples geralmente não têm problema, e muitas vezes ajudam as pessoas a entender o que mudou.

### Reduza ou remova

- Rolagem com parallax e movimento ligado à rolagem
- Grandes deslizes, zooms e transições de virar página
- Vídeo automático e fundos animados
- Elementos que giram, quicam e tremem
- Carrosséis que avançam sozinhos

### Geralmente pode ficar

- Esmaecimentos de opacidade e mudanças de cor
- Respostas pequenas e rápidas ao passar o ponteiro e ao tocar
- Indicadores de progresso que mostram que algo está acontecendo
- Movimento que a própria pessoa inicia e controla, como arrastar
- Imagens paradas no lugar das que se movem

Sempre que puder, substitua em vez de apagar. Se um painel normalmente desliza pela lateral, deixe-o aparecer com um esmaecimento. Se o banner principal toca um loop, mostre um quadro parado dele. O design fica intacto; só o deslocamento some.

## Como respeitar prefers-reduced-motion em CSS

A abordagem mais robusta é tratar o movimento como um aprimoramento. Escreva primeiro o design parado e depois acrescente o movimento dentro de uma media query que só vale quando a pessoa não tem preferência. Se a query não for suportada ou a configuração estiver ativa, a página simplesmente fica parada. A página da MDN sobre [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) documenta o recurso.

```css
/* Still by default */
.hero-bg {
  background: linear-gradient(135deg, #1e1b4b, #6d28d9 55%, #db2777);
  background-size: 100% 100%;
}
.card {
  opacity: 0;
  transition: opacity 200ms ease-out; /* a fade is fine for everyone */
}
.card.is-visible {
  opacity: 1;
}

/* Movement only for visitors with no preference */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    background-size: 200% 200%;
    animation: drift 20s linear infinite alternate;
  }
  .card {
    transform: translateY(24px);
    transition: opacity 200ms ease-out, transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  .card.is-visible {
    transform: none;
  }
}

@keyframes drift {
  to { background-position: 100% 100%; }
}
```

O movimento como aprimoramento. Com o movimento reduzido ativo, os cartões ainda aparecem com esmaecimento, mas nada se desloca e o fundo fica parado.

> **Sobre o reset global** Um trecho de código popular define a duração de todas as animações e transições como quase zero quando o movimento reduzido está ativo. É uma rede de segurança útil para código antigo, mas também remove esmaecimentos úteis e pode quebrar scripts que esperam o fim de uma animação. Prefira decidir componente por componente.

## Movimento reduzido em JavaScript, vídeo e canvas

O movimento controlado por scripts, como efeitos de rolagem, fundos em canvas ou WebGL e vídeo, precisa de uma verificação em JavaScript. Leia a configuração com `matchMedia` e escute as mudanças, porque as pessoas podem alterá-la com a sua página aberta.

```js
const query = matchMedia('(prefers-reduced-motion: reduce)')
const video = document.querySelector('.hero-video')

function apply() {
  if (query.matches) {
    video?.pause()            // the poster image stays
    stopBackgroundLoop()      // your canvas or WebGL loop: draw one frame, then stop
  } else {
    video?.play().catch(() => {})
    startBackgroundLoop()
  }
}

query.addEventListener('change', apply)
apply()
```

Uma verificação para tudo o que é feito por script. Mantenha a imagem de capa ou um único quadro renderizado, para que a página continue parecendo pronta.

Vídeos de fundo e gradientes ao vivo são os culpados mais comuns, porque tocam sozinhos. Os guias de [vídeo de fundo em sites](https://gradiently.design/pt-br/guide/video-background-website) e de [gradientes shader](https://gradiently.design/pt-br/guide/shader-gradients) mostram onde a verificação deve ficar.

## O que a WCAG diz sobre movimento

Três critérios de sucesso das Diretrizes de Acessibilidade para Conteúdo Web tratam de movimento. O suporte ao movimento reduzido é a forma prática de atender ao primeiro; um controle de pausa resolve o segundo.

| Critério | Nível | Em resumo |
| --- | --- | --- |
| 2.3.3 Animação a partir de interações | AAA | O movimento disparado por interação pode ser desativado, a menos que seja essencial |
| 2.2.2 Colocar em pausa, parar, ocultar | A | Conteúdo em movimento que começa sozinho e dura mais de cinco segundos pode ser pausado ou ocultado |
| 2.3.1 Três flashes ou abaixo do limite | A | Nada pisca mais de três vezes em qualquer período de um segundo |

A orientação do W3C sobre [Animação a partir de interações](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) explica o primeiro em detalhes, com exemplos.

## Como criar versões paradas que continuam bonitas

A versão parada não deve parecer uma versão quebrada. Para fundos animados, escolha o quadro que fica melhor sozinho, e não qualquer quadro que por acaso seja o primeiro. Para entradas, garanta que o layout final esteja completo sem elas. Para loops feitos com um material da marca, um quadro parado bem escolhido do mesmo material mantém a identidade intacta. Os [princípios de motion design](https://gradiently.design/pt-br/guide/motion-design-principles) sugerem testar cada animação com um único quadro pausado por esse motivo.

O Gradiently segue a mesma regra: os Marks ao vivo no app ficam parados quando o seu aparelho pede movimento reduzido, e qualquer design que você exporta como loop também pode ser exportado como um PNG parado do mesmo Mark, para lugares onde o movimento não é bem-vindo. Em posts sociais, onde não dá para detectar a configuração, a abordagem mais gentil é um movimento lento e suave; veja [fundos gradientes animados](https://gradiently.design/pt-br/guide/animated-gradient-background).

1. **Ative a configuração** Ative reduzir movimento no seu sistema operacional e recarregue o site.
2. **Confira tudo o que se move** Banners, carrosséis, efeitos de rolagem, vídeos, canvas e estados de carregamento devem estar todos calmos.
3. **Mude a configuração com a página aberta** Os seus scripts devem acompanhar a mudança sem recarregar.
4. **Simule nas ferramentas de desenvolvedor** O Chrome e o Firefox conseguem simular o recurso de mídia, o que é mais rápido enquanto você trabalha.
5. **Olhe o design parado** Garanta que a versão reduzida pareça intencional e completa, e não algo que falhou ao carregar.

## FAQ

### O que é prefers-reduced-motion?

É um recurso de mídia do CSS que informa a um site se a pessoa pediu ao aparelho para reduzir movimentos não essenciais. Os seus valores são reduce e no-preference.

### Movimento reduzido significa remover toda animação?

Não. Remova ou substitua movimentos grandes, parallax, zooms e loops automáticos, mas esmaecimentos suaves e pequenas respostas geralmente não têm problema.

### Como testar prefers-reduced-motion?

Ative a configuração de reduzir movimento no seu sistema operacional e recarregue a página, ou simule o recurso de mídia nas ferramentas de desenvolvedor do Chrome ou do Firefox.

### A WCAG exige suporte ao movimento reduzido?

O critério 2.3.3 Animação a partir de interações, de nível AAA, pede que o movimento disparado por interação possa ser desativado, e o suporte ao movimento reduzido é a forma usual de atendê-lo. Critérios de nível A também tratam de pausar movimentos automáticos e limitar flashes.

### Por que algumas pessoas ativam o movimento reduzido?

Algumas têm distúrbios vestibulares, em que o movimento na tela pode causar tontura ou náusea; outras têm enxaqueca, acham o movimento distrativo ou simplesmente preferem uma tela mais calma.