view-transition-snapshot-size.html (754B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1" /> 5 <style> 6 html { 7 view-transition-name: none; 8 scrollbar-width: none; 9 height: 400vh; 10 background-color: red; 11 } 12 body { 13 margin: 0px; 14 padding: 0px; 15 } 16 ::view-transition { 17 height: 100%; 18 width: 100%; 19 background-color: green; 20 } 21 #target { 22 view-transition-name: target; 23 } 24 ::view-transition-group(*), 25 ::view-transition-old(*), 26 ::view-transition-new(*) { 27 animation-duration: 2s; 28 animation-delay: -1s; 29 animation-play-state: paused; 30 animation-timing-function: linear; 31 } 32 </style> 33 <div id="target"></div> 34 </html>