Example: View Transitions on Multiple Page Website
This CSS code is used in the demo, with the main layout built using Tailwind CSS.
The ::view-transition-new pseudo-element is part of the View Transitions API, which is a web platform feature that allows for smooth transitions between different states of a web page.
Purpose: The ::view-transition-new pseudo-element targets the new elements that are entering the view during a transition. This allows you to apply specific styles or animations to these elements to create a smooth and visually appealing transition effect.
You can use the ::view-transition-old pseudo-element to style the old state of an element during a transition.
CSS
@view-transition {
navigation: auto;
}
html {
color-scheme: light dark;
}
[data-theme='light'] {
color-scheme: light only;
}
[data-theme='dark'] {
color-scheme: dark only;
}
body::before {
--size: 45px;
--line: color-mix(in lch, canvasText, transparent 70%);
content: '';
height: 100vh;
width: 100vw;
position: fixed;
background:
linear-gradient(90deg, var(--line) 1px, transparent 1px var(--size)) 50%
50% / var(--size) var(--size),
linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
var(--size) var(--size);
mask: linear-gradient(-20deg, transparent 50%, white);
top: 0;
transform-style: flat;
pointer-events: none;
z-index: -1;
}
@property --column-one {
inherits: true;
initial-value: 0;
syntax: '';
}
@property --column-two {
inherits: true;
initial-value: 0;
syntax: '';
}
@property --column-three {
inherits: true;
initial-value: 0;
syntax: '';
}
@property --column-four {
inherits: true;
initial-value: 0;
syntax: '';
}
@property --column-five {
inherits: true;
initial-value: 0;
syntax: '';
}
@keyframes one {
from {
--column-one: 100;
}
}
@keyframes two {
from {
--column-two: 100;
}
}
@keyframes three {
from {
--column-three: 100;
}
}
@keyframes four {
from {
--column-four: 100;
}
}
@keyframes five {
from {
--column-five: 100;
}
}
/** This can create a sliding effect where each column appears to transition from the bottom to its respective height. **/
[data-style='slides']::view-transition-new(root) {
clip-path: polygon(
/* 1st column */ 0 100%,
0 calc(var(--column-one) * 1%),
20% calc(var(--column-one) * 1%),
20% 100%,
/* 2nd column */ 20% 100%,
20% calc(var(--column-two) * 1%),
40% calc(var(--column-two) * 1%),
40% 100%,
/* 3rd column */ 40% 100%,
40% calc(var(--column-three) * 1%),
60% calc(var(--column-three) * 1%),
60% 100%,
/* 4th column */ 60% 100%,
60% calc(var(--column-four) * 1%),
80% calc(var(--column-four) * 1%),
80% 100%,
/* 5th column */ 80% 100%,
80% calc(var(--column-five) * 1%),
100% calc(var(--column-five) * 1%),
100% 100%
);
}
[data-style='slides']::view-transition-new(root) {
--speed: 0.625;
--columns: 5;
animation:
one calc(var(--speed) * 1s)
calc(sin((0 / 5) * 45deg) * var(--speed) * 1s),
two calc(var(--speed) * 1s)
calc(sin((1 / 5) * 45deg) * var(--speed) * 1s),
three calc(var(--speed) * 1s)
calc(sin((2 / 5) * 45deg) * var(--speed) * 1s),
four calc(var(--speed) * 1s)
calc(sin((3 / 5) * 45deg) * var(--speed) * 1s),
five calc(var(--speed) * 1s)
calc(sin((4 / 5) * 45deg) * var(--speed) * 1s);
animation-fill-mode: both;
animation-timing-function: linear(
0 0%,
0.0027 3.64%,
0.0106 7.29%,
0.0425 14.58%,
0.0957 21.87%,
0.1701 29.16%,
0.2477 35.19%,
0.3401 41.23%,
0.5982 55.18%,
0.7044 61.56%,
0.7987 68.28%,
0.875 75%,
0.9297 81.25%,
0.9687 87.5%,
0.9922 93.75%,
1 100%
);
z-index: 2;
}
[data-style='slides']::view-transition-old(root) {
animation: none;
}
HTML - First Page
<!DOCTYPE html>
<html class="h-full" data-style="slides" data-theme="light">
<body>
your content goes here
</body>
HTML - Second Page
<!DOCTYPE html>
<html class="h-full" data-style="slides" data-theme="dark">
<body>
your content goes here
</body>