CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS animation-play-state

La proprietà CSS3 animation-play-state controlla la pausa e la riproduzione dell'animazione

La proprietà animation-play-state consente di mettere in pausa o far riprendere un'animazione durante il suo ciclo di esecuzione. Con il valore paused, l'animazione si ferma, mentre con il valore running l'animazione è in esecuzione. È utile per interagire con l'utente, come nel caso di effetti che si attivano al passaggio del mouse o per animazioni che si devono fermare quando l'utente non sta guardando una determinata sezione di una pagina.

Sintassi

animation-play-state: paused | running;

Significato dei valori principali:

  • paused: l'animazione è messa in pausa e non viene eseguita. Può essere utilizzato per fermare un'animazione in corso senza annullarla completamente.

  • running: l'animazione è in esecuzione. Questo è il valore predefinito e indica che l'animazione sta procedendo normalmente.


Esempio proprietà: animation-play-state


Codice Esempio: animation-play-state

CODE: CSSpreleva codice
  1. /* Definizione dell'animazione */
  2. @keyframes slide {
  3.   0%   { transform: translateX(0); }
  4.   100% { transform: translateX(200px); }
  5. }
  6.  
  7. .animated-box {
  8.   width: 100px;
  9.   height: 60px;
  10.   background-color: #ff9800;
  11.   color: white;
  12.   line-height: 60px;
  13.   text-align: center;
  14.   border-radius: 6px;
  15.   animation-name: slide;
  16.   animation-duration: 2s;
  17.   animation-iteration-count: infinite;
  18.   animation-timing-function: ease-in-out;
  19.   animation-play-state: running; /* Animazione attiva */
  20. }

Contenuto Esempio: animation-play-state

Prova questo esempio

DEMO
PayPal DONATE

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies