ancestor-display-change-ref.html (541B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 </head> 8 <style> 9 .block { 10 background-color: blue; 11 margin: 10px; 12 height: 100px; 13 width: 100px; 14 } 15 .fade-out { 16 opacity: 0.5; 17 } 18 .flex { 19 display: flex; 20 } 21 </style> 22 <body> 23 <div id="ancestor" class="flex"> 24 <div id="scope" class="block fade-out"></div> 25 <div class="block"></div> 26 </div> 27 </body> 28 </html>