root-and-nested-element-transition-ref.html (1110B)
1 <!DOCTYPE html> 2 <title>View transitions: basic cross-document navigation (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <style> 6 .old { 7 width: 50vw; 8 height: 100vh; 9 position: fixed; 10 left: 0px; 11 top: 0px; 12 background: grey; 13 } 14 .new { 15 width: 50vw; 16 height: 100vh; 17 position: fixed; 18 left: 50vw; 19 top: 0px; 20 background: orange; 21 } 22 .old_text { 23 position: fixed; 24 top: 0px; 25 left: 0px; 26 width: 100px; 27 height: 100px; 28 background: lightblue; 29 transform: translate(8px, 8px); 30 } 31 .new_text { 32 position: fixed; 33 top: 200px; 34 left: 0; 35 width: 100px; 36 height: 100px; 37 background: lightgreen; 38 transform: translate(8px, 8px); 39 } 40 .inner { 41 width: 100px; 42 height: 100px; 43 position: relative; 44 top: 50px; 45 left: 50px; 46 border: 5px solid black; 47 } 48 </style> 49 <div class="old"></div> 50 <div class="new"></div> 51 <div class="old_text"> 52 This is old element 53 <div class="inner"></div> 54 </div> 55 <div class="new_text"> 56 This is new element 57 <div class="inner" style="border:5px solid blue"></div> 58 </div>