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