Transition animations

Learn custom animations for view transitions.

Custom transitions with @keyframes

Instead of the default cross-fade, you can write your own animation. First define the animation frames with @keyframes: from { opacity: 1 } is the start, to { opacity: 0 } is the end.

Then bind these frames to a transition pseudo-element with the animation property. For example, on ::view-transition-old(root) writing animation: fade-out 0.4s forwards fades the old snapshot out in 0.4 seconds.

Separate animations for old and new

If you want different animations for the old and new snapshots, give the ::view-transition-old(root) and ::view-transition-new(root) selectors their own animation declaration.

For example, the old snapshot can slide out while the new one slides in. Write animation: slide-out 0.4s forwards on the old snapshot and animation: slide-in 0.4s forwards on the new one; each binds to its own @keyframes set.

Exercise Bind a fade-out animation to the old snapshot

Write two blocks. The first is @keyframes fade-out with from { opacity: 1 } and to { opacity: 0 } frames. The second is the ::view-transition-old(root) selector with the declaration animation: fade-out 0.4s forwards in its block.

Show example solution

/* fade-out animation for the root old snapshot */
@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
::view-transition-old(root) {
  animation: fade-out 0.4s forwards;
}

Test yourself

Which CSS property runs an @keyframes set on ::view-transition-old(root)?
- transition
- transition-name
- view-transition-name
- animation
Show answer

animation — Correct. The animation property binds an @keyframes set to an element.

Complete the animation fill mode

/* old snapshot slides out */
::view-transition-old(root) {
  animation: slide-out 0.4s ____;
}

Show answer

/* old snapshot slides out */
::view-transition-old(root) {
  animation: slide-out 0.4s forwards;
}

Match the @keyframes pieces

@keyframes

Defines the animation frames
from

Start frame (0%)
to

End frame (100%)
animation-name

Tells which @keyframes to use

Next lesson: Cross-document transitions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies