How to Configure Strict CSS View-Transition-Old and New Animation-Iteration-Count in Google Chrome

Modern web applications frequently incorporate subtle looped or pulsing animations—such as skeleton shimmer loaders, pulsating radar rings, or breathing accent highlights—during asynchronous page state transitions. While the View Transition API is fundamentally designed for one-shot morphing animations between an outgoing snapshot and an incoming state, developers often need an intermediate loading state or element highlight to loop smoothly while data streams in. CSS provides the standard animation-iteration-count property to specify the exact number of times an animation cycle repeats.

Configuring strict animation-iteration-count rules (e.g., infinite, 2, or fractional counts) across ::view-transition-old and ::view-transition-new in Google Chrome enables developers to create dynamic loading effects directly on pseudo-element layers without adding extra DOM nodes.

Chromium View Transition Iteration Architecture

During an active transition, Chromium generates the temporary pseudo-element image pair:

::view-transition
 └─ ::view-transition-group(content-card)
     └─ ::view-transition-image-pair(content-card)
         ├─ ::view-transition-old(content-card)
         └─ ::view-transition-new(content-card)

By default, the browser executes the default crossfade animation with animation-iteration-count: 1. However, by overriding this property and extending the group duration or keeping the transition pending via an unresolved Promise, developers can run continuous looped effects:

/* Looped Shimmer Pulse on Incoming Skeleton */
::view-transition-new(content-card) {
    animation-name: card-pulse-shimmer;
    animation-duration: 800ms;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes card-pulse-shimmer {
    0%, 100% {
        opacity: 0.6;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.15);
    }
}

Managing Finite Iterations Before Permanent Settling

When you want an incoming notification badge or card to pulse twice before locking into place, specify a finite integer iteration count combined with animation-fill-mode: forwards:

/* Finite Dual-Pulse Animation */
::view-transition-new(notification-badge) {
    animation-name: badge-bounce;
    animation-duration: 300ms;
    animation-iteration-count: 2;
    animation-fill-mode: forwards;
}

@keyframes badge-bounce {
    0% { transform: scale(0.9); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.0); }
}

Inspecting Looped Animations in Chrome DevTools

To inspect and debug iterative animations in Google Chrome:

1. Open DevTools (F12) and bring up the Animations drawer via Ctrl+Shift+P > Show Animations.
2. Trigger your transition state. Chrome DevTools captures the animation track on the timeline.
3. Observe the looped keyframe repetitions displayed along the scrubber.
4. Select ::view-transition-new in the Elements tree and verify in the Computed tab that animation-iteration-count resolves accurately.

Configuring strict animation-iteration-count controls provides powerful motion design flexibility for transitional UI states in Google Chrome.