여러 요소를 순차적으로 표시/숨기기 위해 CSS 사용자 정의 속성에 애니메이션을 적용하려면 어떻게 해야 합니까?

CSS 사용자 정의 속성/변수 애니메이션

문제:

CSS 사용자 정의 속성(변수)을 사용하여 여러 요소에 애니메이션을 적용하는 것은 예상대로 작동하지 않습니다. 원하는 결과는 불투명도를 제어하는 ​​변수를 사용하여 내부 div가 순차적으로 나타나고 사라지는 것입니다.

해결책:

사용자 정의 유형이 있는 CSS 속성:

브라우저가 이해할 수 있도록 @property를 사용하여 변수에 대한 사용자 정의 유형을 도입합니다. 변수의 데이터 유형을 지정하고 점진적인 애니메이션 활성화:

@property --opacity {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

사용자 정의 속성을 사용한 애니메이션:

애니메이션 키프레임에서 사용자 정의 속성 사용:

@keyframes fadeIn {
  50% {--opacity: 1}
}

html {
  animation: 2s fadeIn infinite;
  background: rgba(0 0 0 / var(--opacity));
}

이 예에서 html 요소의 배경은 --opacity 변수에 따라 완전히 투명한 상태에서 부분적으로 불투명한 상태로 애니메이션됩니다. 이는 시간이 지남에 따라 점차적으로 보간됩니다.

위 내용은 여러 요소를 순차적으로 표시/숨기기 위해 CSS 사용자 정의 속성에 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!