scale-animation-on-svg.html (789B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Animating the "scale" property on an SVG element</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> 6 <link rel="match" href="scale-animation-on-svg-ref.html"> 7 8 <style> 9 10 @keyframes scale-animation { 11 from { scale: 1; } 12 to { scale: 2; } 13 } 14 15 svg { 16 width: 400px; 17 height: 400px; 18 } 19 20 rect { 21 width: 100px; 22 height: 100px; 23 transform-origin: top left; 24 animation: scale-animation 1ms linear forwards; 25 } 26 27 </style> 28 </head> 29 <body> 30 <svg><rect></rect></svg> 31 32 <script> 33 34 (async function() { 35 await Promise.all(document.getAnimations().map(animation => animation.finished)); 36 document.documentElement.classList.remove("reftest-wait"); 37 })(); 38 39 </script> 40 </body> 41 </html>