Shorthand animation: Atalho para todas as propriedades de animação

Simplifique a escrita das suas animações CSS.

Você já aprendeu a criar animações complexas e a controlar sua duração, repetições e direção. Mas e se você precisar pausar uma animação em um determinado momento e depois retomá-la? É para isso que serve a propriedade animation-play-state.

A animation-play-state é como o "botão de play/pause" da sua animação. Ela permite que você controle o estado de execução de uma animação, seja para pausá-la temporariamente ou para reiniciá-la de onde parou. Isso é extremamente útil para interações do usuário, como pausar uma animação ao passar o mouse sobre um elemento, ou para criar controles de mídia em elementos animados.

Como funciona animation-play-state

Esta propriedade aceita as palavras-chave running e paused.

Valores possíveis:

  1. running (padrão): A animação está sendo executada normalmente.
  2. paused: A animação é pausada em seu quadro atual. Se for retomada, ela continuará de onde parou.

Sintaxe:

.elemento {
  animation-play-state: <valor>;
}

Exemplos:

Vamos usar uma animação simples de giro.

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

1. Pausando uma animação ao passar o mouse (:hover):

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  /* ... outras propriedades ... */

  animation-name: girar;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* Para um giro constante */
  animation-play-state: running; /* Explicitamente definido, mas é o padrão */
}

.box:hover {
  animation-play-state: paused; /* Pausa a animação ao passar o mouse */
}

Resultado: A caixa gira continuamente. Ao passar o mouse sobre ela, a animação para no ponto exato em que estava. Ao retirar o mouse, ela retoma de onde parou.

2. Iniciando uma animação pausada (via JavaScript ou outra interação):

Embora animation-play-state seja uma propriedade CSS, seu uso mais dinâmico geralmente envolve JavaScript para alternar entre running e paused com base em eventos do usuário.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>animation-play-state</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f2f5;
      margin: 0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: purple;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      font-size: 1.2em;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin-bottom: 20px;

      animation-name: girar;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      animation-play-state: paused; /* Começa pausada */
    }

    @keyframes girar {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    button {
      padding: 10px 20px;
      font-size: 1em;
      cursor: pointer;
      border: none;
      border-radius: 5px;
      background-color: #007bff;
      color: white;
      transition: background-color 0.3s ease;
    }

    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div class="box">PAUSADO</div>
  <button id="toggleButton">Iniciar Animação</button>

  <script>
    const box = document.querySelector('.box');
    const toggleButton = document.getElementById('toggleButton');
    let isPaused = true;

    toggleButton.addEventListener('click', () => {
      if (isPaused) {
        box.style.animationPlayState = 'running';
        box.textContent = 'RODANDO';
        toggleButton.textContent = 'Pausar Animação';
      } else {
        box.style.animationPlayState = 'paused';
        box.textContent = 'PAUSADO';
        toggleButton.textContent = 'Retomar Animação';
      }
      isPaused = !isPaused;
    });
  </script>
</body>
</html>

Resultado: A caixa começa estática com o texto "PAUSADO". Ao clicar no botão, ela começa a girar e o texto muda para "RODANDO". Clicar novamente pausa a animação e o texto volta para "PAUSADO".

3. Múltiplos estados de reprodução para múltiplas animações:

Se você aplicou múltiplas animações com animation-name (separadas por vírgula), você pode fornecer um estado de reprodução para cada uma delas, também separadas por vírgula. A ordem deve corresponder à ordem dos nomes das animações.

@keyframes girar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulsar {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.box {
  /* ... outras propriedades ... */
  animation-name: girar, pulsar;
  animation-duration: 2s, 1.5s;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, paused; /* Girar rodando, Pulsar pausada */
}

Resultado: A animação de giro será executada, mas a animação de pulso estará pausada desde o início.

Dicas para animation-play-state:

  • Interatividade: É a chave para criar animações interativas que respondem às ações do usuário.
  • Performance: Pausar animações que não estão visíveis ou que não são críticas pode melhorar a performance da página, especialmente em dispositivos móveis.
  • JavaScript: Embora possa ser usado com pseudo-classes CSS (:hover), seu potencial máximo é alcançado em conjunto com JavaScript para controle dinâmico.

Pontos Chave:

  • running: Animação em execução.
  • paused: Animação parada no quadro atual.
  • Retomada: Uma animação pausada retoma de onde parou.
  • Controle: Essencial para a interatividade e otimização de animações.