CSS 애니메이션의 일시 정지 및 재생 효과를 얻기 위해 순수 CSS를 사용하는 방법은 무엇입니까? animation-play-state 속성 소개(자세한 설명)

순수한 CSS 메서드를 사용하여 CSS 애니메이션을 일시 중지하거나 재생하세요. 달성이 불가능해야 할 것 같나요? 아니면 달성할 수 있더라도 달성하려면 많은 CSS 스타일이 필요한 매우 귀찮은 구현 방법입니다. 사실 CSS3 애니메이션에는 애니메이션을 일시 정지하고 재생할 수 있는 속성이 있습니다. 이 장에서는 순수한 CSS를 사용하여 CSS 애니메이션의 일시 중지 및 재생 효과를 얻는 방법을 소개합니다. animation-play-state 속성 소개(자세한 설명) . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

animation-play-state 속성

 animation-play-state: paused | running;

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

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

html 코드:

<div class="btn">stop</div> 
<div class="animation"></div>

css 코드:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

js 코드:

document.querySelector('.btn').addEventListener('click', function() {
    let btn = document.querySelector('.btn');
    let elem = document.querySelector('.animation');
    let state = elem.style['animationPlayState'];
    
    if(state === 'paused') {
        elem.style['animationPlayState'] = 'running';
        btn.innerText = 'stop';
    } else {
        elem.style['animationPlayState'] = 'paused';
        btn.innerText = 'play';
    }
    
});

렌더링 중 재생) 및 재생 중지 후):

순수 CSS 구현

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

hover 의사 클래스 구현

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

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

html 코드:

<div class="btn stop">stop</div> 
<div class="animation"></div>

css 코드:

.animation {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}

Rendering:

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

확인된 의사 클래스 구현

이전 기사 "흥미로운 CSS 주제(8): 순수 CSS 탐색 모음 탭 전환 솔루션"에서도 라디오 태그의 확인된 의사 클래스를 사용하는 방법에 대해 설명했습니다. 클릭 이벤트를 캡처하려면 순수 CSS를 구현하세요.

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

html 코드:

<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 {
    width: 100px;
    height: 100px;
    margin: 50px auto;
    background: deeppink;
    animation: move 2s linear infinite alternate;
}

input {
    display: none;
}

@keyframes move {
    0% {
        transform: translate(-100px, 0);
    }
    100% {
        transform: translate(100px, 0);
    }
}

.btn {
    width: 50px;
    margin: 10px auto;
    text-align: center;
    border:1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    cursor:pointer;
    
    &:hover {
        background: #ddd;
        color: #333;
    }
    
    &:active {
        background: #aaa;
    }
}

#stop:checked ~ .animation {
    animation-play-state: paused;
}

#play:checked ~ .animation {
    animation-play-state: running;
}

두 라디오 #stop 및 #play를 클릭하면 .animation 요소에 animation-play-state가 할당되기를 바랍니다. 각각 일시 중지됨 또는 애니메이션 -play-state: running . 그리고 둘 중 하나만 적용될 수 있으므로 두 라디오 태그에 동일한 이름 속성을 부여해야 합니다.

렌더링:

위의 예에서는 CSS 애니메이션을 일시 중지하고 재생하기 위해 순수 CSS 메서드가 구현되었습니다.

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

위 내용은 CSS 애니메이션의 일시 정지 및 재생 효과를 얻기 위해 순수 CSS를 사용하는 방법은 무엇입니까? animation-play-state 속성 소개(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!