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;
}

Next lesson: Scroll-driven animations

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies