Início animations

Pare as animações que atrapalham a leitura

Uma manchete piscando ou um bloco que entra em movimento a cada rolagem pode tirar sua atenção do texto. O atalho interrompe esses efeitos na página aberta.

No computador, arraste o botão abaixo até a barra de favoritos. Depois, abra a página desejada e use o favorito.

Parar animações

No celular ou sem barra de favoritos? Veja as outras formas de usar este atalho abaixo.

Como funciona e quando usar

Como usar este atalho no celular?

No celular, você pode tentar salvar o código como endereço de um favorito. Copie o código abaixo antes de começar.

iPhone (Safari): salve qualquer página nos Favoritos, toque e segure o favorito, escolha Editar e substitua o endereço pelo código copiado.

Android (Chrome): salve uma página nos Favoritos. Abra Favoritos, toque nos três pontos ao lado dela, escolha Editar e substitua o endereço pelo código copiado.

Depois, abra a página que deseja ajustar e acione o favorito. Se ele não executar pelo menu, digite o nome do favorito na barra de endereço e selecione a sugestão correspondente.

Endereço do favorito

javascript:void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}())

O funcionamento varia entre navegadores e versões. Algumas páginas também bloqueiam esse tipo de atalho.

Outra opção no iPhone: app Atalhos

No app Atalhos, crie um atalho com a ação Executar JavaScript na Página Web e cole o código abaixo. Ative a exibição na Folha de Compartilhamento para páginas do Safari. Se o app solicitar, permita a execução de scripts nas configurações do Atalhos. Depois, na página desejada, abra Compartilhar no Safari e escolha seu atalho.

Código para o app Atalhos

void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}());completion();

Como usar pelo console no computador?

Abra a página que deseja ajustar. No Chrome, pressione Ctrl + Shift + J (Windows/Linux) ou ⌘ + Option + J (Mac), cole o código abaixo no console e pressione Enter.

Código para o console

void(function(){var id="disable-page-animations";if(document.getElementById(id))return;var s=document.createElement("style");s.id=id;s.textContent="*,*::before,*::after{animation:none!important;transition:none!important}";(document.head||document.documentElement).appendChild(s);}())

O efeito vale para a página aberta. Antes de executar qualquer código no console, confira o que ele faz; o navegador pode pedir uma confirmação de segurança.

O atalho atua nos efeitos de animação e transição da página aberta. Ele não pausa vídeos nem altera suas preferências no site.

O que para quando você usa o atalho?

Transições de cor, tamanho e posição deixam de acontecer gradualmente. Animações de elementos e de seus detalhes decorativos também são desativadas.

O efeito vale para a página atual até recarregá-la. Se o site criar novos elementos depois, a regra continua aplicada a eles.

Quando vale a pena usar?

Experimente em páginas com banners pulsantes, elementos que aparecem enquanto você rola ou botões que se movem repetidamente. O texto permanece no lugar, sem precisar mudar uma configuração geral do navegador.

Se o incômodo for um vídeo tocando sozinho, use o atalho de reprodução automática: animações de CSS e reprodução de mídia são coisas diferentes.

O que continua funcionando?

Você ainda pode rolar, clicar, preencher formulários e dar play em vídeos. O atalho não interrompe áudio nem vídeos e não garante que todo movimento feito por scripts ou canvas pare.

Um segundo clique não acumula regras. Para voltar ao visual original, recarregue a página.