Name a transitioned element — practice exercise

What you'll be asked to do

1. 1.Name a transitioned elementexercise · easy · 10 min

   Give #box the view transition name card.

   Passes when: Give #box the view transition name card.

2. 2.Name a second elementexercise · easy · 10 min · practice plan

   Give #text the view transition name hero.

   Passes when: Give #text the view transition name hero.

3. 3.Use unique namesexercise · easy · 10 min · practice plan

   Name #box card and #text hero — every name must be unique.

   Passes when: Name #box card and #text hero — every name must be unique.

4. 4.Tune the durationexercise · easy · 10 min · practice plan

   Name #box card and run its animation over 0.4s.

   Passes when: Name #box card and run its animation over 0.4s.

5. 5.Tune the easing tooexercise · medium · 10 min · practice plan

   Name it, set a 0.4s duration and ease-in-out easing.

   Passes when: Name it, set a 0.4s duration and ease-in-out easing.

6. 6.Fix the name with a spacebug fix · easy · 8 min

   A view transition name is a single identifier.

   Passes when: A view transition name is a single identifier.

7. 7.Fix the duplicated namebug fix · easy · 8 min · practice plan

   Two elements cannot share one view transition name.

   Passes when: Two elements cannot share one view transition name.

8. 8.Fix the misspelled propertybug fix · easy · 8 min · practice plan

   The property is view-transition-name.

   Passes when: The property is view-transition-name.

9. 9.Fix the duration with no unitbug fix · easy · 8 min · practice plan

   A duration needs s or ms.

   Passes when: A duration needs s or ms.

10. 10.Fix the name on the wrong elementbug fix · easy · 8 min · practice plan

    The card name belongs on #box.

    Passes when: The card name belongs on #box.

Between them these tasks cover view-transition-name, Pairing elements across views and Tuning the animation.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.