old-content-captures-opacity-ref.html (656B)
1 <!DOCTYPE html> 2 <title>View transitions: capture opacity elements (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 .box { 7 color: red; 8 background: lightblue; 9 width: 100px; 10 height: 100px; 11 contain: paint; 12 position: absolute; 13 font-size: 30pt; 14 will-change: opacity; 15 } 16 #e1 { opacity: 0.75; top: 20px; left: 20px; } 17 #e2 { opacity: 0.5; top: 160px; left: 20px; } 18 #e3 { opacity: 0.25; top: 300px; left: 20px; } 19 body { background: lightpink; } 20 </style> 21 <div id=e1 class=box>one</div> 22 <div id=e2 class=box>two</div> 23 <div id=e3 class=box>three</div>