내 CSS 변수가 애니메이션되지 않는 이유는 무엇입니까?

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

CSS 변수를 사용하여 일련의 내부 div에 애니메이션을 적용하려는 노력 중에 개발자가 어려움에 직면했습니다. @keyframes를 활용하여 애니메이션을 정의함에도 불구하고 결과는 여전히 정적 블랙 박스로 남아 있습니다.

해결책: @property 사용

이 문제를 해결하려면 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));
}

이 예에서 @property는 --opacity를 다음과 같이 정의합니다. 숫자. fadeIn 애니메이션 내에서 불투명도 속성은 50% 표시에서 점차적으로 1로 증가합니다. 이후 html 요소의 배경색은 --opacity 변수에 따라 반투명 검정색으로 부드럽게 전환됩니다.

위 내용은 내 CSS 변수가 애니메이션되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!