Iteration Count
Controls how many times the animation plays. Use a number or infinite to loop forever.
CSS
Beginner
3 min read
animation-iteration-count
Example
.once { animation-iteration-count: 1; } /* default */
.twice { animation-iteration-count: 2; }
.half { animation-iteration-count: 0.5; } /* plays half cycle */
.looping { animation-iteration-count: infinite; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
.error-shake {
animation: shake 0.4s ease 3; /* shake 3 times */
} Pro Tip
Fractional iteration counts like 0.5 play half the animation cycle — useful for partial reveal effects.