| ::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-children(*) { |
| background: inherit; |
| } |
| ::view-transition-group(test) { |
| background: inherit; |
| } |
| ::view-transition-image-pair(*), |
| ::view-transition-old(*), |
| ::view-transition-new(*) |
| { |
| display: none; |
| } |