animation-events-basic.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!doctype html><style>
  2. body {
  3. margin: 0;
  4. display: flex;
  5. justify-content: center;
  6. align-items: center;
  7. height: 100vh;
  8. background-color: #f0f0f0;
  9. }
  10. div {
  11. width: 100px;
  12. height: 100px;
  13. background-color: #3498db;
  14. position: relative;
  15. animation: moveRight 0.1s linear;
  16. animation-play-state: paused;
  17. }
  18. @keyframes moveRight {
  19. 0% {
  20. left: 0;
  21. }
  22. 100% {
  23. left: 100px;
  24. }
  25. }
  26. </style>
  27. <body>
  28. <script src="../../include.js"></script>
  29. <div id="d"></div>
  30. <script>
  31. asyncTest(done => {
  32. let div = document.getElementById("d");
  33. div.addEventListener("animationstart", () => {
  34. println("animationstart");
  35. });
  36. div.addEventListener("animationend", () => {
  37. println("animationend");
  38. div.style.animationPlayState = "paused";
  39. div.style.display = "none";
  40. done();
  41. });
  42. });
  43. </script>
  44. </body>