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

When orchestrating complex visual transitions with the View Transition API in Chromium, authors frequently combine multiple transform effects—such as combining a parent page slide with an individual card scale or floating rotation. In standard CSS, when an element specifies multiple animations affecting the same property (e.g. transform), the subsequent animation declaration completely replaces the underlying value. With the introduction of the animation-composition CSS property, developers can now instruct the browser to composite animations additively or accumulatively rather than replacing them.

Configuring strict animation-composition: add or accumulate on ::view-transition-old and ::view-transition-new in Google Chrome enables layered motion design—allowing independent micro-animations to layer harmoniously on top of macro layout morphs.

Understanding CSS Animation Composition Modes

The animation-composition property defines how animated keyframe values combine with the underlying property value:

• replace (default): The animated value overrides the underlying value completely.
• add: The animated value is added to the underlying value. For transforms, this applies matrix concatenation (e.g., a scale transform is applied on top of a translation).
• accumulate: The animated value and underlying value are combined mathematically into a single composite value where list components sum numerically.

/* Layering a micro-wobble on top of a macro view-transition morph */
::view-transition-new(interactive-card) {
    animation-name: card-reveal, subtle-wobble;
    animation-duration: 400ms, 200ms;
    animation-composition: replace, add;
}

@keyframes card-reveal {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes subtle-wobble {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}

Authoring Additive Multi-Layer Keyframes

Because ::view-transition-group animates the element’s bounding box geometry, applying animation-composition: add directly to ::view-transition-new ensures custom transformations do not clash with Chromium’s automatic spatial interpolation:

/* Additive transform layering on incoming content */
::view-transition-new(modal-dialog) {
    animation-name: modal-scale-pop;
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-composition: add;
}

@keyframes modal-scale-pop {
    from { transform: scale(0.92); }
    to { transform: scale(1); }
}

Inspecting Composition in Chrome DevTools

To inspect and audit animation composition in Google Chrome:

1. Open DevTools (F12) and bring up the Animations drawer via Ctrl+Shift+P > Show Animations.
2. Trigger the transition to capture the multi-animation tracks.
3. Select ::view-transition-new in the Elements panel.
4. In the Computed panel, verify that animation-composition computes to add or accumulate.
5. Scrub the timeline to verify that both the position morph and additive scale/rotation interpolate simultaneously without flickering.

Configuring strict animation-composition unlocks advanced, cinematic layering for view transitions in Google Chrome.