transition-after-animation-001.html (1218B)
1 <!DOCTYPE html> 2 <title>Starting transition after animation has ended</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions/"> 4 <link rel="help" href="https://crbug.com/1261155"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="./support/helper.js"></script> 8 <style> 9 @keyframes anim { 10 from { left: 100px } 11 to { left: 200px } 12 } 13 #div { 14 left: 0px; 15 position: relative; 16 width: 50px; 17 height: 50px; 18 background-color: green; 19 } 20 #div.animate { 21 animation: anim 0.1s linear; 22 } 23 #div.transition { 24 left: 300px; 25 transition: left 1000s steps(2, start); 26 } 27 </style> 28 <div id=div> 29 </div> 30 <script> 31 32 promise_test(async t => { 33 const watcher = new EventWatcher(t, div, ['animationend']); 34 35 assert_equals(getComputedStyle(div).left, '0px'); 36 37 div.classList.toggle('animate'); 38 assert_equals(getComputedStyle(div).left, '100px'); 39 40 await watcher.wait_for('animationend'); 41 assert_equals(getComputedStyle(div).left, '0px'); 42 43 div.classList.toggle('transition'); 44 assert_equals(getComputedStyle(div).left, '150px'); 45 }, 'Starting transition after animation has ended'); 46 47 </script>