Summary - Transitional gallery
Build a transitional gallery with view transitions.
Transitional gallery
In this group you learned the core parts of view transitions: the ::view-transition root, naming with view-transition-name, custom animations with @keyframes, and multi-page transitions with @view-transition.
Now you will combine them in a gallery example. To produce a smooth transition between a thumbnail and a detail view, you will use both naming and animation.
Exercise Bind the thumbnail to the transition
Write a block for the .thumb selector. The block must contain the declaration view-transition-name: gallery-thumb. This way the thumbnail and the detail image share the same name.
Show example solution
/* name for the thumbnail */
.thumb {
view-transition-name: gallery-thumb;
}Exercise A zoom-in animation for the detail view
Write two blocks. The first is @keyframes zoom-in with from { transform: scale(0.8) } and to { transform: scale(1) } frames. The second is the ::view-transition-new(root) selector with the declaration animation: zoom-in 0.3s forwards in its block.
Show example solution
/* zoom-in animation for the detail view */
@keyframes zoom-in {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
::view-transition-new(root) {
animation: zoom-in 0.3s forwards;
}Test yourself
-
Which CSS property gives a smooth transition between a thumbnail and a detail view in a gallery?
- view-transition-name
- background-color
- z-index
- display
Show answer
view-transition-name — Correct. Giving the same view-transition-name to both elements makes the browser draw a transition between them.
-
Give the detail image a transition name
/* give the detail image a name */ .detail-image { view-transition-name: ____; }Show answer
/* give the detail image a name */ .detail-image { view-transition-name: gallery-thumb; }