집 > 기사 > 웹 프론트엔드 > CSS를 사용하여 CSS 애니메이션의 일시 중지 및 재생 기능을 구현하는 방법에 대한 자습서

CSS를 사용하여 CSS 애니메이션의 일시 중지 및 재생 기능을 구현하는 방법에 대한 자습서

小云云원래의: 2017-11-20 14:59:562851검색

CSS는 글꼴, 색상, 위치 등과 같은 스타일 구조를 정의하는 언어입니다. 웹 페이지의 정보가 형식화되고 표시되는 방식을 설명하는 데 사용됩니다. CSS 스타일은 HTML 웹 페이지 또는 별도의 스타일 시트 파일에 직접 저장할 수 있습니다. 어느 쪽이든 스타일 시트에는 지정된 유형의 요소에 스타일을 적용하기 위한 규칙이 포함되어 있습니다. 이 섹션에서는 CSS를 사용하여 CSS 애니메이션의 일시 중지 및 재생 기능을 구현하는 방법에 대한 튜토리얼을 공유하겠습니다.

우리는 CSS3 애니메이션에 애니메이션을 일시 중지하고 재생할 수 있는 속성이 있다는 것을 알고 있습니다.

{ 
   animation-play-state: paused | running; 
 }

animation-play-state: 이 속성은 애니메이션이 실행 중인지 일시 중지되었는지 여부를 정의합니다. 애니메이션이 실행 중인지 확인하기 위해 쿼리할 수 있습니다. 또한 애니메이션 재생을 일시 중지하고 다시 시작하도록 해당 값을 설정할 수 있습니다.

Javascript의 도움으로 CSS 애니메이션의 실행 및 재생을 제어할 수 있습니다. 일부 핵심 코드는 다음과 같습니다.

<div class="btn">stop</div>  <div class="animation"></div> 
 <style>  .animation {      animation: move 2s linear infinite alternate;  } 
  @keyframes move {      0% {          transform: translate(-100px, 0);      }  
      100% {          transform: translate(100px, 0);      }  }
        </style> document.querySelector(&#39;.btn&#39;).addEventListener(&#39;click&#39;, function() 
        {      let btn = document.querySelector(&#39;.btn&#39;);      let elem = document.querySelector(&#39;.animation&#39;);  
            let state = elem.style[&#39;animationPlayState&#39;];            if(state === &#39;paused&#39;)
             {          elem.style[&#39;animationPlayState&#39;] = &#39;running&#39;;          btn.innerText = &#39;stop&#39;;      }
              else {          elem.style[&#39;animationPlayState&#39;] = &#39;paused&#39;;          btn.innerText = &#39;play&#39;;      }        }); 
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

순수한 CSS 구현

순수한 CSS를 사용하여 구현할 수 있는지 살펴보겠습니다.

hover 의사 클래스 구현

hover 의사 클래스를 사용하여 마우스를 버튼 위로 가져갈 때 애니메이션 스타일의 일시 중지를 제어합니다.

키 코드는 다음과 같습니다.

<div class="btn stop">stop</div> 
 
<div class="animation"></div> 
 
<style> 
 .stop:hover ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
</style>

Demo — CSS 애니메이션(호버)의 일시 중지 및 재생을 구현하는 순수 CSS 메서드: (https://codepen.io/Chokcoco/pen/PpxKBX)

물론 이 방법은 충분히 똑똑하지 않습니다. 마우스의 자유를 해제하고 한 번 클릭하면 일시 중지되고 다시 클릭하면 재생됩니다. 다른 방법이 있나요?

확인된 의사 클래스 구현

이전 기사 "흥미로운 CSS 주제(8): 순수 CSS 네비게이션 바 탭 전환 솔루션"에서도 라디오 태그의 확인된 의사 클래스 사용과 Pure 구현에 대해 이야기했습니다. 클릭 이벤트를 캡처하는 CSS입니다.

그리고 클릭한 요소를 사용하여 일부 CSS 스타일을 제어할 수 있습니다. 구현은 다음과 같습니다:

<input id="stop" type="radio" name="playAnimation" /> 
 
<input id="play" type="radio" name="playAnimation" /> 
 
<div class="box"> 
 
    <label for="stop"> 
 
        <div class="btn">stop</div> 
 
    </label> 
 
    <label for="play"> 
 
        <div class="btn">play</div> 
 
    </label> 
 
</div> 
 
<div class="animation"></div>

핵심 CSS 코드의 일부:

.animation { 
 
    animation: move 2s linear infinite alternate; 
 
} 
 
  
 #stop:checked ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
  
 #play:checked ~ .animation { 
 
    animation-play-state: running; 
 
}

두 라디오 #stop 및 #play를 클릭하면 .animation 요소에 animation-play-state: Paused 또는 animation이 할당되기를 바랍니다. -재생 상태: 실행 중입니다. 그리고 둘 중 하나만 적용될 수 있으므로 두 라디오 태그에 동일한 이름 속성을 부여해야 합니다.

DEMO - CSS 애니메이션의 일시정지 및 재생을 구현하는 순수 CSS 메소드: (https://codepen.io/Chokcoco/pen/QpJwBW)

위 예제 데모에서는 순수 CSS 메소드를 구현하여 일시정지를 구현합니다. CSS 애니메이션 재생.

물론 라디오를 체크박스로 바꾸거나 :target 의사 클래스 선택기를 사용하여 위와 동일한 효과를 얻는 등의 다른 방법도 있습니다. 관심이 있다면 시도해 볼 수 있습니다.

위 내용은 CSS를 사용하여 CSS 애니메이션의 일시정지 및 재생 기능을 구현하는 방법에 대한 튜토리얼입니다. 모든 분들께 도움이 되기를 바랍니다.

CSS를 사용하여 CSS 애니메이션의 일시 중지 및 재생 기능을 구현하는 방법에 대한 자습서

관련 기사