variable-animation-substitute-into-keyframe-transform.html (2256B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables - Animation - Substitute Into Keyframe - transform property</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <meta rel="author" title="Kevin Babbitt"> 9 <meta rel="author" title="Greg Whitworth"> 10 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 11 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> 12 13 <style> 14 @keyframes transformanim 15 { 16 from { transform: scale(0.5); } 17 to { transform: scale(var(--finalScale)); } 18 } 19 20 /* Start the animation in the paused state and fill at both ends so we can inspect values from both keyframes. */ 21 #target 22 { 23 animation-name: transformanim; 24 animation-duration: 1s; 25 animation-play-state: paused; 26 animation-fill-mode: both; 27 transform-origin: 0 0; 28 --finalScale: 2; 29 } 30 </style> 31 </head> 32 <body> 33 34 <div id="target">This text should scale from half size to double size over a period of 1 second.</div> 35 36 <script type="text/javascript"> 37 "use strict"; 38 39 // Force an initial layout pass 40 document.documentElement.offsetHeight; 41 42 test(function() { 43 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(), 44 "matrix(0.5, 0, 0, 0.5, 0, 0)", 45 "scale is 0.5 before animation runs"); 46 }, "Verify transform before animation"); 47 48 var animationTest = async_test("Verify transform after animation"); 49 50 animationTest.step(function() { 51 // Set event handler 52 document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() { 53 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("transform").trim(), 54 "matrix(2, 0, 0, 2, 0, 0)", 55 "scale is 2 after animation runs") 56 animationTest.done(); 57 })); 58 59 // Trigger animation 60 document.getElementById("target").style.animationPlayState = "running"; 61 }); 62 </script> 63 64 </body> 65 </html>