<h1></h1>
<div class="no-support">this demo needs <a href="https://developer.chrome.com/docs/web-platform/view-transitions/">view transitions</a></div>
@layer demo {}
@layer demo.support {
* {
box-sizing: border-box;
margin: 0;
}
html {
block-size: 100%;
color-scheme: dark light;
}
body {
min-block-size: 100%;
font-family: system-ui, sans-serif;
display: grid;
place-content: center;
place-items: center;
}
h1 {
font-size: 50vmin;
text-align: center;
}
.no-support {
display: none;
}
}
const word = 'View-Transitions'.split('')
const h1 = document.querySelector('h1')
const rate = 600
let index = 0
if (document?.startViewTransition) {
setInterval(() => {
document.startViewTransition(() => {
h1.textContent = word[index++]
if (index >= word.length)
index = 0
})
}, rate)
}
else {
document.querySelector('.no-support').style.display = 'block'
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.