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