View Transitions
This feature is not (yet) supported on your device
The View Transitions API enables app-like transitions between pages that can be defined using only CSS animations
and transitions.
A transition can be defined for the whole view or separate HTML elements on the page. By default, a cross-fade
animation is applied if the transition is not customized with CSS. If an element is present in both views but has
a different position or different dimensions in the views this will also be animated by the browser automatically.
On a supporting device, choose a transition type and then navigate to another page to see the transition.
// wrapping the function that updates the DOM in document.startViewTransition will animate the change
document.startViewTransition(() => updateDOM());
/* here we customize the transition, these are the shared styles for the old and new view*/
::view-transition-new(root),
::view-transition-old(root) {
animation-duration: 300ms;
animation-timing-function: ease-out;
animation-direction: normal;
}
/* old view slides out to the left */
::view-transition-old(root) {
animation-name: slide-out;
}
/* new view slides in from the right */
::view-transition-new(root) {
animation-name: slide-in;
mix-blend-mode: normal;
}
/* class "back-transition" is added to the html element
* to customize the back transition
* new view
*/
.back-transition::view-transition-new(root) {
animation-name: slide-out-reverse;
}
/* customized back transition for old view */
.back-transition::view-transition-old(root) {
animation-name: slide-in-reverse;
mix-blend-mode: normal;
z-index: 1;
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(-20%);
}
}
@keyframes slide-out-reverse {
from {
transform: translateX(-20%);
}
to {
transform: translateX(0);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slide-in-reverse {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}