이 기사에서는 유용하다고 생각한 CSS 사용자 정의 속성의 응용 프로그램을 공유합니다.

마이크로 인터랙션을 위해 페이지에 최대한 많은 애니메이션을 넣는 것을 좋아하는 나와 같으면 (농담, 그렇게 하지 마세요) @keyframes 를 사용하여 많은 CSS 애니메이션을 작성하게 될 것입니다.
@keyframes는 유연성이 없기로 악명이 높으며 일단 선언되면 값이 고정됩니다. 동작은 같지만 값이 다른 @keyframes 세트가 있는 경우 다른 세트를 만들어야 합니다. 그 결과 유사하지만 숫자에 약간의 변화가 있는 많은 @keyframes가 생성됩니다. 아래의 예를 살펴보겠습니다.

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-a-little {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.3;
  }
}

.item-1 {
  animation: fade-in 300ms ease;
}

.item-2 {
  animation: fade-in-a-little 300ms ease;
}

위의 예에는 opacity 에서 100% 값이 약간만 다를 뿐 유사한 2개의 다른 애니메이션이 있는 2개의 항목이 있습니다.

이제 이것이 더 많은 항목에 적용될 때 어떻게 변할지 상상해 보십시오. 웹 사이트가 확장됨에 따라 CSS 파일이 부풀려지는 100개의 유사한@keyframes 결과를 얻게 됩니다. 우리는 그것을 가질 수 없습니다. 😐

구조를 위한 CSS 사용자 정의 속성

CSS 사용자 정의 속성(CSS 변수라고도 함)은 테마에 가장 널리 적용됩니다. @keyframes를 재사용 가능하게 만드는 데에도 사용할 수 있습니다! (CSS 사용자 정의 속성에 대해 알아보려면 here 참조)

CSS 사용자 정의 속성으로 이전 예제를 리팩토링합시다!

@keyframes fade {
  0% {
    opacity: var(--fade-start, 0);
  }

  100% {
    opacity: var(--fade-end, 1);
  }
}

.item-1 {
  animation: fade 300ms ease;
}

.item-2 {
  --fade-end: 0.3;
  animation: fade 300ms ease;
}

fade-in-a-little @keyframes 더 이상 필요하지 않으므로 꺼냅니다. 이제 @keyframes fade 의 1개 세트만 있고 CSS 사용자 정의 속성을 시작 불투명도 값과 끝 불투명도 값에 다음과 같이 적용합니다.

opacity: var(--fade-start, 0); // start

opacity: var(--fade-end, 1); // end

이 예에는 --fade-start 및 --fade-end 의 2가지 사용자 지정 속성이 있습니다. 이러한 변수는 var() 함수를 사용하여 적용됩니다(자세한 내용은 here 참조). var() 함수는 2개의 매개변수, 값 및 대체(기본값)를 허용합니다.

따라서 이 줄 opacity: var(--fade-start, 0); 에서 --fade-start 가 설정되어 있지 않으면 대신 0 이 적용됩니다. --fade-end 도 마찬가지입니다.

여기서 얻은 최종 결과는 기본적으로 @keyframes와 fade 사이에서 opacity: 0 할 수 있고 CSS 선택기 범위 내에서 조정할 수 있는 opacity: 1 세트입니다. 🤯

잠깐... 그래서 페이드 아웃? 예! @keyframes 에 대해 fade-out 의 다른 집합을 선언하는 대신 다음과 같이 fade를 재사용하고 --fade-start를 1로, --fade-end를 0으로 설정할 수 있습니다.

.item-to-fade-out {
  --fade-start: 1;
  --fade-end: 0;
  animation: fade 300ms ease;
}

CSS 사용자 정의 속성을 사용하면 @keyframes 이제 변수 부분을 이후 단계에서 정의하여 @keyframes 재사용 가능하게 만드는 것과 같은 기능을 할 수 있습니다. 야 드라이 ❤️️

Codepen을 파괴할 시간

하나@keyframes ~fade 모두

요약

페이딩 애니메이션은 웹에서 가장 일반적인 애니메이션 중 하나입니다. 이제 CSS 사용자 정의 속성을 사용하여 원하는 만큼 다양한 변형을 가지면서 CSS 팽창을 크게 줄일 수 있습니다.

이것을 @keyframes에 적용하는 것을 고려하십시오. 당신은 많은 작은 변화로 많은 것을 반복하고 있다는 것을 알게 됩니다.

이 정보가 유용하기를 바랍니다!