side-effects-of-animations-none-ref.html (1062B)
1 <!DOCTYPE html> 2 <title> 3 Animations not in effect nor current shouldn't have side-effects (ref). 4 </title> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section"> 6 <link rel="author" href="mailto:bokan@chromium.org"> 7 <style> 8 .testcase { 9 position: relative; 10 margin: 2px; 11 border: 1px solid black; 12 width: 250px; 13 height: 25px; 14 } 15 .label { 16 flex-grow: 1; 17 } 18 .container { 19 background-color: lightgrey; 20 margin: 4px; 21 display: flex; 22 width: 600px; 23 flex-direction: row; 24 justify-content: flex-end; 25 align-items: center; 26 } 27 .pass { 28 width: 100%; 29 height: 100%; 30 background-color: limegreen; 31 } 32 </style> 33 34 <!-- before phase playing backwards --> 35 <div class="container"> 36 <div class="label">Before phase</div> 37 <div class="testcase" id="before"> 38 <div class="pass"></div> 39 </div> 40 </div> 41 42 <!-- after phase playing forwards --> 43 <div class="container"> 44 <div class="label">After phase</div> 45 <div class="testcase" id="after"> 46 <div class="pass"></div> 47 </div> 48 </div>