Turn: Hybrid Basic

Exit

(View Transition)

Enter

This demonstrates using both View Transitions and standard CSS animations. Standard animations are used for exit and enter, whereas View Transitions are used to transition the nav. Exit animations are applied immediately, then once the new page has loaded, it waits for the View Transition to complete, before performing the enter animation. Browsers that do not support View Transitions will still see the exit/enter animations, but the nav won't be transitioned.

Next example or back to examples

/* (Excerpt) */

/* Apply exit/enter animations as before */
html.turn-advance.turn-exit [data-turn-exit] {
  animation-name: fade-out-up;
  animation-duration: .3s;
}

html.turn-advance.turn-enter [data-turn-enter] {
  animation-name: fade-in-up;
  animation-duration: .6s;
}

/* Hide flash of content during transition */
html.turn-advance.turn-before-transition [data-turn-exit],
html.turn-advance.turn-transition [data-turn-exit] {
  opacity: 0;
}

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.