사용자 정의 CSS 속성에 부드럽게 애니메이션을 적용하려면 어떻게 해야 합니까?

CSS에서 사용자 정의 속성 애니메이션

여러 내부 div를 동기식으로 애니메이션화하기 위해 개발자가 CSS 변수를 사용하려고 시도했지만 문제가 발생했습니다. 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));
}

In 이 예에서는 opacity 변수가 숫자로 명시적으로 정의되고 fadeIn 애니메이션 속성은 CSS 변수를 사용하여 HTML 요소의 배경에 원하는 점진적 전환 효과를 얻습니다. 불투명도.

위 내용은 사용자 정의 CSS 속성에 부드럽게 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!