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