transition-and-animation-with-different-durations.html (743B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Transform animation and opacity transition with different durations 5 </title> 6 <style> 7 div { 8 width: 100px; height: 100px; 9 background: blue; 10 } 11 @keyframes translate { 12 from { transform: translateY(0px); } 13 to { transform: translateY(0px); } 14 } 15 </style> 16 <div id="target"></div> 17 <script> 18 window.addEventListener("load", () => { 19 var target = document.getElementById("target"); 20 target.style = "opacity: 0;"; 21 22 getComputedStyle(target).transform; 23 24 target.style = "transition: opacity 0.2s; opacity: 1; " + 25 "animation: translate 0.1s;"; 26 27 target.addEventListener("transitionend", () => { 28 document.documentElement.classList.remove("reftest-wait"); 29 }); 30 }); 31 </script>