scale-animation-with-var-001.html (589B)
1 <!DOCTYPE HTML> 2 <!-- this is functionally a crashtest, but I'm including a reference too --> 3 <link rel="help" href="https://issues.chromium.org/issues/375798131"> 4 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 5 6 <style> 7 8 @keyframes k { 9 to { 10 scale: var(--scale-to); 11 } 12 } 13 14 #target { 15 --percentage: 3; 16 --scale-to: calc(var(--percentage)); 17 18 animation: k linear 2s -1s paused; 19 width: 50px; 20 height: 50px; 21 background: green; 22 transform-origin: top left; 23 } 24 25 </style> 26 27 <p>Test passes if there is a filled green square.</p> 28 29 <div id="target"></div>