# Prefers reduced motion: animação que todos podem usar

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

Para algumas pessoas, um scroll com parallax ou um cabeçalho com zoom não é encantador; é estonteante. Uma definição diz-te quem são. Eis como a respeitar sem perder o teu design.

## The short version

- O prefers-reduced-motion é uma media feature de CSS que indica se um visitante pediu ao seu dispositivo para minimizar o movimento não essencial.
- As pessoas ativam a redução de movimento por muitas razões, incluindo perturbações vestibulares, em que o movimento no ecrã pode causar tonturas, náuseas ou dores de cabeça.
- Reduzir movimento não tem de significar nenhum movimento: substitui os movimentos grandes, como deslizes, zooms e parallax, por esbatidos suaves, e para os loops em reprodução automática.
- Um padrão fiável é escrever primeiro o design parado e acrescentar movimento só dentro de uma media query prefers-reduced-motion: no-preference.
- Todos os sistemas operativos têm uma definição para reduzir o movimento, por isso podes testar o teu site ativando-a.

O **prefers reduced motion**, escrito `prefers-reduced-motion` em CSS, é uma media feature que diz ao teu site que um visitante pediu ao dispositivo para minimizar o movimento não essencial. Quando devolve `reduce`, deves acalmar a página: parar os loops em reprodução automática, substituir deslizes, zooms e parallax por esbatidos suaves ou por nada, e mostrar versões paradas dos fundos animados. É pouco trabalho e torna um site utilizável para pessoas que, de outra forma, o deixariam a sentir-se mal.

## Para quem é a redução de movimento

Algumas pessoas têm perturbações vestibulares, que afetam o ouvido interno e o sentido de equilíbrio e de movimento do cérebro. Para elas, um movimento grande no ecrã, sobretudo parallax, zoom e elementos a deslizar por áreas grandes, pode provocar tonturas, náuseas, dores de cabeça ou desorientação. Outras acham o movimento constante distrativo, têm enxaquecas ou simplesmente preferem um ecrã mais calmo. Todas usam o mesmo interruptor nas definições do dispositivo, e não deviam ter de explicar porquê.

| Dispositivo | Onde fica a definição |
| --- | --- |
| Mac | Definições do Sistema, Acessibilidade, Monitor, Reduzir movimento |
| iPhone e iPad | Definições, Acessibilidade, Movimento, Reduzir movimento |
| Windows 11 | Definições, Acessibilidade, Efeitos visuais, Efeitos de animação (desativado) |
| Android | Definições, Acessibilidade, Remover animações (o caminho varia com o fabricante e a versão) |

Os browsers leem estas definições e comunicam-nas ao teu site através do prefers-reduced-motion.

## O que reduzir e o que pode ficar

Reduzir movimento não é o mesmo que eliminar o movimento. O objetivo é retirar o movimento que simula uma viagem pelo espaço ou que ocupa grandes partes do ecrã, e parar tudo o que se reproduz sozinho. As respostas pequenas e rápidas e os esbatidos simples são geralmente aceitáveis, e muitas vezes ajudam as pessoas a perceber o que mudou.

### Reduzir ou retirar

- Scroll com parallax e movimento ligado ao scroll
- Deslizes grandes, zooms e transições de virar página
- Vídeo em reprodução automática e fundos animados
- Elementos que giram, saltam ou tremem
- Carrosséis que avançam sozinhos

### Normalmente pode ficar

- Esbatidos de opacidade e mudanças de cor
- Respostas pequenas e rápidas ao passar o cursor e ao premir
- Indicadores de progresso que mostram que há trabalho a decorrer
- Movimento que o visitante inicia e controla, como arrastar
- Imagens paradas no lugar das que se movem

Sempre que possível, substitui em vez de apagar. Se um painel normalmente desliza de lado, deixa-o antes aparecer com um esbatido. Se o cabeçalho reproduz um loop, mostra uma imagem parada dele. O design fica intacto; só a deslocação desaparece.

## Como respeitar o prefers-reduced-motion em CSS

A abordagem mais robusta é tratar o movimento como uma melhoria. Escreve primeiro o design parado e depois acrescenta movimento dentro de uma media query que só se aplica quando o visitante não tem preferência. Se a query não for suportada ou a definição estiver ativa, a página fica simplesmente parada. A página do MDN sobre o [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) documenta a funcionalidade.

```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 melhoria. Com a redução de movimento ativa, os cartões continuam a aparecer com um esbatido, mas nada se desloca e o fundo fica parado.

> **Sobre o reset global** Um excerto popular põe todas as animações e transições com uma duração quase nula quando a redução de movimento está ativa. É uma rede de segurança útil para código antigo, mas também retira esbatidos úteis e pode estragar scripts que esperam pelo fim de uma animação. Prefere decidir componente a componente.

## Redução de movimento em JavaScript, vídeo e canvas

O movimento controlado por scripts, como efeitos de scroll, fundos em canvas ou WebGL e vídeo, precisa de uma verificação em JavaScript. Lê a definição com `matchMedia` e escuta as alterações, porque as pessoas podem mudá-la com a tua 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 é programado. Mantém a imagem de capa ou uma única imagem renderizada, para a página continuar a parecer acabada.

Os vídeos de fundo e os gradientes ao vivo são os casos mais frequentes, porque se reproduzem sozinhos. Os [fundos de vídeo em sites](https://gradiently.design/pt-pt/guide/video-background-website) e os [gradientes com shaders](https://gradiently.design/pt-pt/guide/shader-gradients) mostram onde deve ficar a verificação.

## O que diz a WCAG sobre movimento

Três critérios de sucesso das Diretrizes de Acessibilidade para o Conteúdo da Web tratam do movimento. O suporte à redução de movimento é a forma prática de cumprir o primeiro; um controlo de pausa trata do segundo.

| Critério | Nível | Em resumo |
| --- | --- | --- |
| 2.3.3 Animação a partir de interações | AAA | O movimento desencadeado por uma interação pode ser desativado, a menos que seja essencial |
| 2.2.2 Colocar em pausa, parar, ocultar | A | O 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 limiar | A | Nada pisca mais de três vezes num segundo |

As orientações do W3C sobre [Animation from Interactions](https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html) explicam o primeiro em detalhe, com exemplos.

## Desenhar versões paradas que continuam bonitas

A versão parada não deve parecer uma versão avariada. Nos fundos animados, escolhe a imagem que fica melhor sozinha, não a que calhar ser a primeira. Nas entradas, garante que a composição final fica completa sem elas. Nos loops feitos a partir de uma matéria de marca, uma imagem parada bem escolhida da mesma matéria mantém a identidade intacta. Os [princípios de motion design](https://gradiently.design/pt-pt/guide/motion-design-principles) sugerem testar cada animação com uma única imagem em pausa por esta razão.

A Gradiently segue a mesma regra: os Marks ao vivo na aplicação ficam parados quando o teu dispositivo pede redução de movimento, e qualquer design que exportes como loop também pode ser exportado como PNG parado do mesmo Mark, para os sítios onde o movimento não é bem-vindo. Nas publicações para redes sociais, onde não consegues detetar a definição, a abordagem mais gentil é um movimento lento e suave; vê os [fundos em gradiente animado](https://gradiently.design/pt-pt/guide/animated-gradient-background).

1. **Ativa a definição** Ativa a redução de movimento no teu sistema operativo e recarrega o site.
2. **Verifica tudo o que se move** Cabeçalhos, carrosséis, efeitos de scroll, vídeos, canvas e estados de carregamento devem estar todos calmos.
3. **Muda-a com a página aberta** Os teus scripts devem acompanhar a alteração sem recarregar.
4. **Emula-a nas ferramentas de programador** O Chrome e o Firefox conseguem emular a media feature, o que é mais rápido enquanto trabalhas.
5. **Olha para o design parado** Garante que a versão reduzida parece intencional e completa, e não algo que falhou a carregar.

## FAQ

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

É uma media feature de CSS que diz a um site se o visitante pediu ao dispositivo para minimizar o movimento não essencial. Os seus valores são reduce e no-preference.

### Reduzir movimento significa retirar toda a animação?

Não. Retira ou substitui os movimentos grandes, o parallax, os zooms e os loops em reprodução automática, mas os esbatidos suaves e as pequenas respostas costumam ser aceitáveis.

### Como testo o prefers-reduced-motion?

Ativa a definição de reduzir movimento no teu sistema operativo e recarrega a página, ou emula a media feature nas ferramentas de programador do Chrome ou do Firefox.

### A WCAG exige suporte à redução de movimento?

O critério 2.3.3 Animação a partir de interações da WCAG, de nível AAA, pede que o movimento desencadeado por interações possa ser desativado, e o suporte à redução de movimento é a forma habitual de o cumprir. Os critérios de nível A também tratam de pausar o movimento automático e de limitar os flashes.

### Porque é que algumas pessoas ativam a redução de movimento?

Algumas têm perturbações vestibulares, em que o movimento no ecrã pode causar tonturas ou náuseas; outras têm enxaquecas, acham o movimento distrativo ou simplesmente preferem um ecrã mais calmo.