더북(TheBook)
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook)

06/07/animation-play-state.html

  <style>
    div{
      width:100px;
      height:100px;
      background-color:red;
      position:relative;
      animation-name:move;
      animation-duration:10s;
      animation-fill-mode:forwards;
      animation-play-state:paused;
    }
    @keyframes move{
      from{
        left:0;
      }
      to{
        left:300px;
      }
    }
  </style>
</head>
<body>
  <div></div>
  <button id="start">start</button>
  <button id="paused">paused</button>
  <script>
    const box = document.querySelector("div");
    document.getElementById("start").addEventListener("click", function(){
      box.style.animationPlayState = "running";
    });
    document.getElementById("paused").addEventListener("click", function(){
      box.style.animationPlayState = "paused";
    })
  </script>
</body>
</html>

그림 6-77 실행결과

animation-play-state 속성값을 paused로 설정했기 때문에 코드를 실행해도 애니메이션이 실행되지 않습니다. 이때 화면의 버튼을 누르면 div 요소에서 애니메이션이 시작되고 버튼을 누르면 일시 정지됩니다.