Repeating Animations

Repeating Animations

By default, animations play once. The animation-iteration-count property controls how many times the animation repeats.

Basic Syntax

/* Play once (default) */
animation-iteration-count: 1;

/* Play 3 times */
animation-iteration-count: 3;

/* Loop forever */
animation-iteration-count: infinite;

/* Fractional — play 1.5 times (stops halfway through the second run) */
animation-iteration-count: 1.5;

Common Use Cases

Count	Use Case
1	Entrance animations (fade in, slide in)
2 – 3	Attention-grabbing alerts (shake, bounce)
infinite	Loading spinners, pulsing indicators, background animations

Loading Spinner (Infinite)

@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

Pulsing Notification Badge

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

.badge {
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    animation: pulse 2s ease-in-out infinite;
}

Shake Effect (Limited Repeats)

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-8px); }
    40%      { transform: translateX(8px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}

.error-input {
    animation: shake 0.4s ease 3;
    /* Shakes 3 times, then stops */
}

Bouncing Arrow

@keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

.scroll-indicator {
    animation: bounceDown 1.5s ease-in-out infinite;
    font-size: 24px;
}

Pausing and Resuming

Use animation-play-state to pause and resume animations:

.spinner {
    animation: spin 1s linear infinite;
    animation-play-state: running;
}

.spinner.paused {
    animation-play-state: paused;
}

/* Pause on hover */
.spinner:hover {
    animation-play-state: paused;
}

Key Takeaways

• animation-iteration-count controls repetition: 1, 3, infinite, or fractional
• Use infinite for continuous animations (spinners, pulses, indicators)
• Use limited counts for attention effects (shake, bounce alerts)
• animation-play-state lets you pause/resume: running or paused
• Combine infinite with ease-in-out for natural, breathing motions