Custom Keyframe Transitions in Depth

The default cross-fade is nice, but the real power of the View Transition API comes from custom keyframe animations. You can slide, scale, and transform elements independently.

Targeting Elements

Give an element a view-transition-name in CSS to isolate it from the default cross-fade:

.card {
    view-transition-name: card;
}

Now you can animate just that element with its own keyframes:

::view-transition-old(card) {
    animation: slide-out 0.3s ease-out forwards;
}
::view-transition-new(card) {
    animation: slide-in 0.3s ease-in forwards;
}

@keyframes slide-out {
    to { transform: translateX(-100%); opacity: 0; }
}
@keyframes slide-in {
    from { transform: translateX(100%); opacity: 0; }
}

This pattern is excellent for list rearrangements, image galleries, and page transitions.

← Back to blog