display-change-during-transition-ref.html (759B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <style> 8 .box { 9 position: absolute; 10 z-index: 0; 11 will-change: transform; 12 contain: strict; 13 } 14 #scope { 15 position: absolute; 16 background: #eee; 17 left: 40px; 18 top: 40px; 19 width: 490px; 20 height: 190px; 21 } 22 .part { 23 left: 30px; 24 top: 30px; 25 width: 120px; 26 height: 120px; 27 background-color: purple; 28 transform: translateX(150px); 29 outline: 5px solid green; 30 } 31 </style> 32 </head> 33 <body> 34 <div id=scope class=box> 35 <div class="part box"></div> 36 </div> 37 </body> 38 </html>