translate-percent-with-width-and-height-separate.html (1019B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>Animating the "translate" property with a percent value while also animating "width" and "height" using two separate animations</title> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms/"> 6 <link rel="match" href="translate-percent-with-width-and-height-separate-ref.html"> 7 <script src="../../../common/reftest-wait.js"></script> 8 <style> 9 10 div { 11 width: 10px; 12 height: 10px; 13 background-color: black; 14 animation-duration: 10s; 15 animation-name: size, translate; 16 } 17 18 @keyframes size { 19 0.000000001%, to { 20 width: 200px; 21 height: 200px; 22 } 23 } 24 25 @keyframes translate { 26 0.000000001%, to { 27 translate: 50% 50%; 28 } 29 } 30 31 </style> 32 </head> 33 <body> 34 <div></div> 35 <script> 36 (async function() { 37 await Promise.all(document.getAnimations().map(animation => animation.ready)); 38 await new Promise(requestAnimationFrame); 39 await new Promise(requestAnimationFrame); 40 takeScreenshot(); 41 })(); 42 </script> 43 </body> 44 </html>