Source code
Revision control
Copy as Markdown
Other Tools
::view-transition,
::view-transition-group(*),
div {
background: red;
inset: 0;
position: absolute;
transform: none !important;
}
html.no-match::view-transition {
background: green;
}
.green {
view-transition-name: green;
}
.test {
view-transition-name: test;
}
.green-ref {
view-transition-group: green;
}
.red {
view-transition-name: red;
}
.test-ref {
view-transition-group: test;
}
.red-ref {
view-transition-group: red;
}
.nearest-ref {
view-transition-group: nearest;
}
.normal {
view-transition-name: normal;
}
.normal-ref {
view-transition-group: normal;
}
.contain-ref {
view-transition-group: contain;
}
::view-transition-group(*) {
animation-play-state: paused;
}
::view-transition-group(green) {
background: green;
}
::view-transition-group(test) {
background: inherit;
}
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*)
{
display: none;
}