content-with-transparent-background-ref.html (1037B)
1 <!DOCTYPE html> 2 <title>View transitions: element with transparent background (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <style> 6 .target { 7 width: 100px; 8 height: 100px; 9 view-transition-name: target; 10 position: fixed; 11 top: 25px; 12 left: 25px; 13 background: rgba(0,0,0,0); 14 } 15 16 .embedded { 17 width: 25%; 18 height: 50%; 19 position: absolute; 20 top: 0px; 21 will-change: opacity; 22 } 23 24 #one{ 25 left: 25%; 26 background: lightblue; 27 } 28 #two { 29 left: 50%; 30 background: lightgreen; 31 } 32 33 html::view-transition-group(hidden) { animation-duration: 300s; } 34 html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; } 35 36 html::view-transition-group(target) { animation: unset; } 37 html::view-transition-old(target) { animation: unset; opacity: 1; } 38 html::view-transition-new(target) { animation: unset; opacity: 0; } 39 40 </style> 41 <div class="target"> 42 <div class="embedded" id="one"></div> 43 <div class="embedded" id="two"></div> 44 </div>