단일 애니메이션을 사용하여 CSS 사용자 정의 속성의 여러 인스턴스에 애니메이션을 적용하려면 어떻게 해야 합니까?

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

CSS에서 CSS 변수라고도 하는 사용자 정의 속성은 스타일 정의 및 재사용을 위한 강력한 메커니즘을 제공합니다. 프로젝트 전반에 걸쳐 가치를 부여합니다. 미리 정의된 값이나 변수를 기반으로 스타일 속성을 동적으로 변경하는 기능을 제공합니다. 그러나 애니메이션의 경우 사용자 정의 속성이 때때로 문제를 일으킬 수 있습니다.

단일 애니메이션을 사용하여 특정 속성의 여러 인스턴스에 애니메이션을 적용하려고 할 때 이러한 문제 중 하나가 발생합니다. 개발자는 사용자 정의 속성을 활용하여 모든 후속 인스턴스가 동일한 애니메이션의 영향을 받도록 하는 것을 목표로 합니다. 그러나 어떤 경우에는 하나의 인스턴스만 원하는 애니메이션을 수행하고 나머지 인스턴스는 영향을 받지 않습니다.

애니메이션의 사용자 정의 속성 이해

문제는 근본적인 애니메이션의 사용자 정의 속성 동작. 기존 CSS 구문을 사용하여 정의하면 사용자 정의 속성은 애니메이션 중에 정적 값으로 처리됩니다. 즉, 속성 값이 애니메이션 기간 동안 보간되지 않아 점진적인 전환이 아닌 갑작스러운 변화가 발생합니다.

해결책: @property 규칙 사용

이러한 제한을 극복하기 위해 개발자는 사용자 정의 속성과 함께 @property 규칙을 사용할 수 있습니다. @property 규칙을 사용하면 유형을 지정하고 초기 값을 제공하여 변수를 정의할 수 있습니다. 예를 들어 사용자 정의 속성을 숫자로 선언하면 브라우저는 속성을 숫자 값으로 해석하고 원활한 전환과 애니메이션을 활성화할 수 있습니다.

구현 예:

다음에 대한 사용자 정의 속성을 사용하여 깜박이는 div 요소를 만드는 것을 목표로 하는 다음 예를 고려하십시오. opacity:

@property --opacity {
  syntax: '<number>'; /* Define as type number for transition */
  initial-value: 0;
  inherits: false;
}

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

#test {
  width: 100px;
  height: 200px;
  background-color: black;
  animation: fadeIn 1s infinite;
}

#test div {
  width: 20px;
  height: 20px;
  margin: auto;
  background-color: white;
  opacity: var(--opacity);
}

이 접근 방식을 사용하면 사용자 정의 속성 --opacity가 숫자로 정의되어 애니메이션이 애니메이션 지속 시간 동안 불투명도 값을 부드럽게 보간하여 원하는 깜박임 효과를 얻을 수 있습니다.

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