Propriedade CSS animation-play-state

A propriedade CSS animation-play-state controla se uma animação CSS está em execução ou pausada. Alternar seu valor é a forma padrão de iniciar e parar uma animação sem removê-la.

Pausar não reinicia o progresso: quando você retoma uma animação pausada, ela continua exatamente de onde parou, em vez de recomeçar do primeiro keyframe. Isso torna o animation-play-state ideal para controles de "play/pause" e para interromper o movimento enquanto o usuário passa o cursor ou interage com um elemento.

Esta página aborda a sintaxe da propriedade, seus valores aceitos, exemplos controlados por hover e por JavaScript, e como ela se comporta quando várias animações são executadas no mesmo elemento.

Quando usar

Pausar ao passar o cursor — interrompa uma animação em loop (um marquee, um spinner, um carrossel) enquanto o ponteiro estiver sobre ele, para que os usuários possam ler ou interagir.
Botões de play/pause — altere o valor via JavaScript em resposta a um clique, da mesma forma que um reprodutor de mídia alterna a reprodução.
Adiar o início — declare uma animação, mas inicie-a como paused, e defina-a como running posteriormente, quando uma condição for atendida (um elemento entra na tela, os dados terminam de carregar, etc.).

A propriedade é uma das propriedades de animação CSS3 e faz parte do atalho animation, junto com animation-name, animation-duration e animation-iteration-count.

Múltiplas animações

Quando você atribui várias animações separadas por vírgula a um elemento, cada valor de animation-play-state corresponde, em ordem, à animação na mesma posição em animation-name. Por exemplo, animation-play-state: paused, running pausa a primeira animação e executa a segunda. Se você listar menos estados do que nomes, os valores são repetidos para cobrir os demais.

Valor Inicial	running
Aplica-se a	Todos os elementos. Também se aplica aos pseudo-elementos ::before e ::after.
Herdado	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.animationPlayState = "paused";

Sintaxe

animation-play-state: paused | running | initial | inherit;

Exemplos

O valor "running"

running é o valor padrão, portanto este exemplo se comporta da mesma forma com ou sem a declaração — a caixa desliza uma vez ao longo de 10 segundos:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #ccc;
        position: relative;
        animation: play 10s;
        animation-play-state: running;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-play-state example</h2>
    <p>Here the animation-play-state is set to "running".</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Pausar ao passar o cursor com o valor "paused"

Aqui uma animação em loop é pausada enquanto o ponteiro está sobre a caixa. Como pausar mantém o progresso atual, a caixa congela no lugar e continua do mesmo ponto quando você afasta o cursor:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
      }
      div:hover {
        animation-play-state: paused;
      }
      @keyframes play {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>Hover over the green box to stop the animation.</p>
    <div></div>
  </body>
</html>

Experimente Você Mesmo »

Alternando play/pause com JavaScript

Você pode ler ou definir o valor via script por meio da propriedade animationPlayState do objeto style de um elemento. É assim que um botão de play/pause funciona:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        width: 150px;
        height: 150px;
        background: #8ebf42;
        position: relative;
        animation: play 1s infinite;
        animation-play-state: paused;
      }
      @keyframes play {
        from { left: 0px; }
        to { left: 200px; }
      }
    </style>
  </head>
  <body>
    <button id="toggle">Play</button>
    <div id="box"></div>
    <script>
      const box = document.getElementById("box");
      const button = document.getElementById("toggle");
      button.addEventListener("click", () => {
        const paused =
          getComputedStyle(box).animationPlayState === "paused";
        box.style.animationPlayState = paused ? "running" : "paused";
        button.textContent = paused ? "Pause" : "Play";
      });
    </script>
  </body>
</html>

A animação começa paused, portanto nada se move até que o usuário clique no botão. Cada clique alterna o estado e atualiza o rótulo do botão.

Valores

A propriedade aceita uma única palavra-chave (ou uma lista separada por vírgulas, uma por animação):

Valor	Descrição	Experimente
running	É o valor padrão quando a animação está em execução.	Experimente »
paused	A animação está pausada.	Experimente »
initial	Define a propriedade com seu valor padrão (`running`).
inherit	Herda a propriedade do elemento pai.

Suporte nos navegadores

animation-play-state é suportado em todos os navegadores modernos — Chrome, Edge, Firefox, Safari e Opera. Não é animável, portanto alterá-lo tem efeito imediato em vez de fazer uma transição entre estados.

Prática

O que a propriedade CSS 'animation-play-state' faz?

Especifica se a animação está em execução ou pausada.Determina a velocidade da animação.Transfere o efeito da animação para seus elementos filhos.Define a cor da animação.Reinicia a animação quando definida como 'running' a partir do estado 'paused'.