scale-and-rotate-both-specified-on-animation-keyframes.html (1090B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Animating both the "scale" and "rotate" property</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#individual-transforms"> 6 <link rel="match" href="scale-and-rotate-both-specified-on-animation-keyframes-ref.html"> 7 8 <style> 9 10 @keyframes scale-and-rotate-animation { 11 0% { scale: 1.5; rotate: 0deg; } 12 0.001% { scale: 1; rotate: 90deg; } 13 100% { scale: 1; rotate: 90deg; } 14 } 15 16 #target { 17 position: absolute; 18 width: 100px; 19 height: 100px; 20 background-color: black; 21 22 transform-origin: bottom left; 23 animation: scale-and-rotate-animation linear 100s; 24 } 25 26 </style> 27 </head> 28 <body> 29 <div id="target"></div> 30 31 <script> 32 33 (async function() { 34 // We need to wait for the animation to have started and progressed for one frame 35 // before taking the snapshot. 36 await Promise.all(document.getAnimations().map(animation => animation.ready)); 37 await new Promise(requestAnimationFrame); 38 document.documentElement.classList.remove("reftest-wait"); 39 })(); 40 41 </script> 42 </body> 43 </html>