variable-animation-over-transition.html (2965B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables - Animation - Overriding Transition</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 from { --value: blue; } 17 to { --value: green; } 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: valueanim; 24 animation-duration: 1s; 25 animation-play-state: paused; 26 animation-fill-mode: both; 27 transition-property: --value; 28 transition-duration: 1s; 29 --value: red; 30 color: var(--value); 31 } 32 #target.changed 33 { 34 --value: black; 35 } 36 </style> 37 </head> 38 <body> 39 40 <div id="target">This text should animate from blue to green over a period of 1 second. The transition is not visible because the animation overrides it.</div> 41 42 <script type="text/javascript"> 43 "use strict"; 44 45 // Force an initial layout pass 46 document.documentElement.offsetHeight; 47 48 test(function() { 49 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "blue", "--value is blue before animation runs"); 50 }, "Verify CSS variable value before animation"); 51 52 test(function() { 53 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 0, 255)", "color is blue before animation runs"); 54 }, "Verify substituted color value before animation"); 55 56 var afterAnimationVariableTest = async_test("Verify CSS variable value after animation"); 57 document.getElementById("target").addEventListener("animationend", afterAnimationVariableTest.step_func_done(function() { 58 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("--value").trim(), "green", "--value is green after animation runs") 59 })); 60 61 var afterAnimationColorTest = async_test("Verify substituted color value after animation"); 62 document.getElementById("target").addEventListener("animationend", afterAnimationColorTest.step_func_done(function() { 63 assert_equals(window.getComputedStyle(document.getElementById("target")).getPropertyValue("color").trim(), "rgb(0, 128, 0)", "color is green after animation runs") 64 })); 65 66 // Trigger animation and transition 67 document.getElementById("target").style.animationPlayState = "running"; 68 document.getElementById("target").className = "changed"; 69 </script> 70 71 </body> 72 </html>