Proprietà CSS animation-play-state

La proprietà CSS animation-play-state controlla se un'animazione CSS è in esecuzione o in pausa. Alternarla è il metodo standard per avviare e interrompere un'animazione senza rimuoverla del tutto.

La messa in pausa non azzera il progresso: quando si riprende un'animazione in pausa, essa continua esattamente dal punto in cui si era fermata, anziché ripartire dal primo keyframe. Ciò rende animation-play-state ideale per i controlli "play/pausa" e per bloccare il movimento mentre l'utente passa il cursore su un elemento o vi interagisce.

Questa pagina tratta la sintassi della proprietà, i valori accettati, esempi con hover e con JavaScript, e il comportamento quando più animazioni sono in esecuzione sullo stesso elemento.

Quando usarla

Pausa al passaggio del mouse — interrompe un'animazione in loop (un banner scorrevole, uno spinner, un carosello) mentre il puntatore si trova sopra di essa, in modo che gli utenti possano leggere o interagire.
Pulsanti play/pausa — cambia il valore tramite JavaScript in risposta a un clic, come fa un lettore multimediale per alternare la riproduzione.
Ritardare l'avvio — dichiara un'animazione ma avviala in stato paused, poi impostala su running quando una condizione viene soddisfatta (un elemento scorre nella vista, i dati terminano di caricarsi, ecc.).

La proprietà è una delle proprietà di animazione CSS3 e fa parte della shorthand animation, insieme a animation-name, animation-duration e animation-iteration-count.

Animazioni multiple

Quando si assegnano più animazioni separate da virgola a un elemento, ogni valore di animation-play-state si allinea, in ordine, con l'animazione nella stessa posizione in animation-name. Ad esempio, animation-play-state: paused, running mette in pausa la prima animazione e avvia la seconda. Se si specificano meno stati che nomi, i valori vengono ripetuti per coprire i restanti.

Valore iniziale	running
Si applica a	Tutti gli elementi. Si applica anche agli pseudo-elementi ::before e ::after.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	object.style.animationPlayState = "paused";

Sintassi

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

Esempi

Il valore "running"

running è il valore predefinito, quindi questo esempio si comporta allo stesso modo con o senza la dichiarazione — il box scorre una volta in 10 secondi:

<!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>

Provalo tu stesso »

Pausa al passaggio del mouse con il valore "paused"

Qui un'animazione in loop viene messa in pausa mentre il puntatore si trova sopra il box. Poiché la pausa mantiene il progresso attuale, il box si congela nel punto in cui si trova e riprende dalla stessa posizione quando si sposta il cursore:

<!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>

Provalo tu stesso »

Alternare play/pausa con JavaScript

È possibile leggere o impostare il valore tramite script attraverso la proprietà animationPlayState dell'object style di un elemento. Ecco come funziona un pulsante play/pausa:

<!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>

L'animazione parte in stato paused, quindi nulla si muove finché l'utente non fa clic sul pulsante. Ogni clic alterna lo stato e aggiorna l'etichetta del pulsante.

Valori

La proprietà accetta una singola parola chiave (o un elenco separato da virgole, uno per animazione):

Valore	Descrizione	Provalo
running	È il valore predefinito quando l'animazione è in esecuzione.	Provalo »
paused	L'animazione è in pausa.	Provalo »
initial	Imposta la proprietà al suo valore predefinito (`running`).
inherit	Eredita la proprietà dall'elemento padre.

Supporto browser

animation-play-state è supportata in tutti i browser moderni — Chrome, Edge, Firefox, Safari e Opera. Non è animabile, quindi la modifica del valore ha effetto immediato anziché transitare tra gli stati.

Pratica

Cosa fa la proprietà CSS 'animation-play-state'?

Specifica se l'animazione è in esecuzione o in pausa.Determina la velocità dell'animazione.Trasferisce l'effetto dell'animazione agli elementi figlio.Definisce il colore dell'animazione.Riavvia l'animazione quando viene impostata su 'running' dallo stato 'paused'.