test.html

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes moveRight {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(300px);
        }
      }

      #hanbyeol {
        animation: 1s moveRight forwards;
      }
    </style>
  </head>
  <body>
    <img
      src="https://item.kakaocdn.net/do/592728ea7408bcf69f797c0446b584a6c37d537a8f2c6f426591be6b8dc7b36a"
      id="hanbyeol"
      alt="집에 가는 한별이"
    />
    <script>
      const $hanbyeol = document.querySelector('#hanbyeol');

      $hanbyeol.addEventListener('animationend', () => {
        alert('한별이가 오른쪽으로 이동했어요!');
      });
    </script>
  </body>
</html>