CSS 사용자 정의 속성으로 CSS 애니메이션을 재생하고 일시 중지하는 방법

CSS 애니메이션 재생 및 일시 중지 : CSS 사용자 정의 속성을 사용하여 잘 제어

이 기사에서는 애니메이션을 일시 중지하고 제어하는 ​​방법에 중점을 둔 CSS @keyframes 애니메이션에 대해 설명합니다. animation-play-state 속성을 사용하여 제어를 위해 JavaScript와 협력 할 수 있지만 많은 세부 사항이 있습니다. CSS 사용자 정의 속성을 사용하여 애니메이션을 잘 제어 할 수있는보다 유연한 설정 방법을 소개합니다.

애니메이션을 일시 중지하는 것의 중요성

CSS 중심의 슬라이드를 개발할 때 흥미로운 현상을 발견했습니다. 창에없는 애니메이션은 여전히 ​​실행 중입니다! 이로 인해이 실행중인 애니메이션이 여전히 CPU/GPU 리소스를 소비하여 페이지 성능에 영향을 미칩니 까?

DevTools의 성능 패널은 "오프 스크린"프레임의 애니메이션 소비를 직접 표시 할 수는 없지만 슬라이드에서 스크롤하여 다시 돌아올 때 애니메이션이 일시 중지되지 않지만 다음 화면으로 계속 실행됩니다.

따라서 애니메이션이 어떻게 일시 중지되는지 연구하는 것이 중요합니다.

1. 성능 : 불필요한 자원 소비를 피하십시오.
2. 컨트롤 : 애니메이션에 대한 사용자 컨트롤을 제공합니다.
3. 접근성 : 일부 사용자는 애니메이션에 민감 할 수 있습니다.

애니메이션을 일시 중지하는 기본 방법

CSS에서 애니메이션을 일시 중지하는 유일한 방법은 animation-play-state 속성을 사용하고 그 가치를 paused 로 설정하는 것입니다.

 .paused {
  애니메이션 플레이-스테이트 : 일시 정지;
}

JavaScript 에서이 속성은 animationPlayState 이며 설정 방법은 다음과 같습니다.

 emeter.style.animationPlayState = '일시 정지';

animationPlayState 의 현재 값을 읽음으로써 재생/일시 정지 토글을 만들 수 있습니다.

 const running = element.style.animationPlayState === 'running';
element.style.animationPlayState = 실행? '일시 정지': '달리기';

애니메이션을 일시 중지하는 또 다른 방법은 animation-duration 0s 초로 설정하는 것입니다. 애니메이션은 실제로 여전히 실행 중이지만 지속 시간이 0이므로 조치가 나타나지 않습니다. 그러나 이것은 실제 일시 정지가 아닙니다.

애니메이션의 직접 제거 ( animation: none !important; )도 실제 일시 중지가 아닙니다.

데이터 속성 및 CSS가있는 사용자 정의 속성

우리는 데이터 속성 (예 : data-animation )을 CSS 선택기로 사용하고 CSS 사용자 정의 속성을 애니메이션 속성의 값으로 사용합니다.

<div data-animation=""></div>

 [데이터 애니메이션] {
  생기:
    var (-animn, 없음)
    var (-Animdur, 1s)
    var (-animtf, 선형)
    var (-Animdel, 0s)
    var (-애니메이션, 무한)
    var (-Animdir, 대체)
    var (-animfm, 없음)
    var (-animps, running);
}

사용자 정의 속성을 통해 애니메이션의 모든 측면을 제어 할 수 있습니다. CSS 사용자 정의 속성의 장점은 CSS 및 JavaScript로 읽고 설정할 수 있으며 CSS 코드의 양을 줄일 수 있다는 것입니다.

애니메이션 자체는 클래스 선택기를 사용하고 [data-animation] 선택기의 변수를 업데이트합니다.

 /* 애니메이션 클래스*/
.a-pulse {
  --animn : 펄스;
}
.A- 슬라이드 {
  --animdur : 3s;
  --animn : 슬라이드;
}

/* 키 프레임*/
@keyframes 펄스 {
  / * ... */
}
@keyframes 슬라이드 {
  / * ... */
}

예 : CheckBox Trick을 사용하여 애니메이션을 일시 중지합니다

모든 애니메이션에 대한 일시 중지를 제어하기위한 확인란을 만듭니다.

<input type="checkbox" id="data-animation-pause">

 [Data-Animation-Pause] : 확인 ~ [데이터-애니메이션] {
  --animps : 일시 정지;
}

자바 스크립트없이 모든 애니메이션을 일시 중지/재생하려면 확인란을 클릭하십시오.

CSS 전용 슬라이드 쇼

나는 사용한다<details></details> 태그는 활성 애니메이션 autoplay 통해 슬라이드를 자동으로 전환하는 슬라이드를 만듭니다. 각 슬라이드에는 고유 한 보조 애니메이션이 있습니다. --animps 속성은 애니메이션의 재생 상태를 제어하고 --img-animps 속성은 보조 애니메이션의 재생 상태를 제어합니다.

GPU 과부하를 방지하기 위해 이상적으로 메인 애니메이션은 모든 보조 애니메이션을 일시 중지해야합니다. Chrome Browser (현재)는 @keyframes 애니메이션에서 CSS 사용자 정의 속성을 업데이트 할 수 있습니다.

메인 애니메이션 @keyframes 에서 --img-animps 속성을 업데이트하십시오.

 @keyframes AutoPlay {
  / * ... */
  51% {-Img-animps : paused} /* 중지! */
  / * ... */
}

다른 브라우저와 호환 되려면 초기 값을 running 하도록 설정해야합니다.

prefers-reduced-motion

prefers-reduced-motion 미디어 쿼리를 사용하여 사용자 선호도에 응답 할 수 있습니다.

 @Media (선호-감소 모션) {
  [data-animation = "대체"] {
    -Animdur : 4S;
    --animn : 불투명;
  }
  / * ... */
}

JavaScript를 사용하여 애니메이션을 일시 중지합니다

JavaScript를 사용하여 모든 [data-animation] 요소를 반복하고 --animps 속성을 전환 할 수 있습니다.

 // ... JavaScript 코드 ...

IntersectionObserver 사용

애니메이션을 자동으로 재생하고 일시 중지하려면 IntersectionObserver 사용할 수 있습니다.

 // ... JavaScript 코드 ...

슬라이드에 오디오 추가 (보너스)

오디오 태그를 추가하고 재생을 제어하고 JavaScript에서 일시 중지하십시오.

<audio src="your-audio.mp3"></audio>

 // ... JavaScript 코드 ...

위의 방법을 통해 CSS 애니메이션의 재생 및 일시 정지를 유연하게 제어하고 페이지 성능 및 접근성을 향상시킬 수 있습니다.

위 내용은 CSS 사용자 정의 속성으로 CSS 애니메이션을 재생하고 일시 중지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!