variable-animation-to-only.html (2157B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables - Animation - From and To Values</title> 5 6 <meta rel="author" title="Kevin Babbitt"> 7 <meta rel="author" title="Greg Whitworth"> 8 <link rel="author" title="Microsoft Corporation" href="http://microsoft.com" /> 9 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#syntax"> 10 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <style> 14 @keyframes valueanim 15 { 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 } 27 #target 28 { 29 --value: blue; 30 } 31 #target span 32 { 33 color: var(--value); 34 } 35 </style> 36 </head> 37 <body> 38 39 <div id="target"><span>This text should animate from blue to green over a period of 1 second.</span></div> 40 41 <script type="text/javascript"> 42 "use strict"; 43 44 // Force an initial layout pass 45 document.documentElement.offsetHeight; 46 47 test(function() { 48 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before animation runs"); 49 }, "Verify CSS variable value before animation"); 50 51 var animationTest = async_test("Verify CSS variable value after animation"); 52 53 animationTest.step(function() { 54 // Set event handler 55 document.getElementById("target").addEventListener("animationend", animationTest.step_func(function() { 56 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs") 57 animationTest.done(); 58 })); 59 60 // Trigger animation 61 document.getElementById("target").style.animationPlayState = "running"; 62 }); 63 </script> 64 65 </body> 66 </html>