Sintassi

Significato dei valori principali:

• number: il numero di volte che l'animazione deve essere ripetuta. Può essere un numero intero, ad esempio 3, per eseguire l'animazione 3 volte.

• infinite: l'animazione si ripete all'infinito, senza interruzioni, fino a quando non viene fermata manualmente.

Esempio proprietà: animation-iteration-count

Codice Esempio: animation-iteration-count

CODE: CSS

1. /* Definizione dell'animazione */

2. @keyframes bounce {

3.   0%   { transform: translateY(0); }

4.   50%  { transform: translateY(-50px); }

5.   100% { transform: translateY(0); }

6. }

8. .animated-box {

9.   display: inline-block;

10.   padding: 20px 40px;

11.   background-color: #0077cc;

12.   color: white;

13.   font-size: 18px;

14.   border-radius: 8px;

15.   animation: bounce 0.6s ease-in-out 3;

16.   animation-iteration-count: 3; /* 3 ripetizioni */

17. }

Contenuto Esempio: animation-iteration-count

Prova questo esempio

DEMO

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