CSS @property로 그라데이션과 숫자 애니메이션 구현하기 - 커스텀 속성 완벽 가이드

CSS 커스텀 속성(CSS Variables)은 편리하지만, 기본적으로 애니메이션이 제대로 작동하지 않는다는 한계가 있었어요. @property 규칙은 이 문제를 해결하고 커스텀 속성에 타입을 지정해 부드러운 애니메이션을 가능하게 합니다.

@property란 무엇인가요?

@property는 CSS 커스텀 속성을 정식으로 등록하는 CSS 규칙입니다. 일반 CSS 변수와 달리 타입, 초기값, 상속 여부를 명시적으로 선언할 수 있어요.

@property --rotation {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

syntax 속성으로 데이터 타입을 지정하면 브라우저가 값의 중간 상태를 계산할 수 있어 transition과 animation이 매끄럽게 동작합니다.

그라데이션 애니메이션 구현하기

일반 CSS 변수로는 불가능했던 그라데이션 색상 애니메이션을 @property로 구현할 수 있어요.

@property --gradient-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.gradient-box {
  background: linear-gradient(var(--gradient-angle), #667eea, #764ba2);
  transition: --gradient-angle 0.5s ease;
}

.gradient-box:hover {
  --gradient-angle: 180deg;
}

<angle> 타입을 지정했기 때문에 0deg에서 180deg까지 부드럽게 전환되면서 그라데이션이 회전하는 효과를 만들 수 있습니다.

숫자 카운터 애니메이션

숫자가 증가하는 카운터 효과도 @property로 간단히 구현 가능해요.

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

.counter {
  counter-reset: num var(--num);
  animation: count 2s ease-in-out;
}

.counter::after {
  content: counter(num);
}

@keyframes count {
  to { --num: 100; }
}

JavaScript 없이 순수 CSS만으로 0부터 100까지 증가하는 애니메이션을 만들 수 있습니다.

syntax 속성 주요 타입

@property의 syntax 속성에는 다양한 데이터 타입을 지정할 수 있어요:

• <number>: 숫자 (정수, 소수)
• <length>: px, em, rem 등의 길이 값
• <percentage>: 퍼센트 값
• <angle>: deg, rad 등의 각도 값
• <color>: 색상 값
• *: 모든 타입 허용 (애니메이션 불가)

타입을 정확히 지정할수록 브라우저가 최적화된 애니메이션을 제공합니다.

주의사항

@property는 Chrome 85+, Edge 85+, Safari 15.4+에서 지원되며 Firefox는 아직 미지원입니다(2025년 1월 기준). 프로덕션 환경에서는 @supports 규칙으로 지원 여부를 체크하거나 JavaScript의 CSS.registerProperty() API를 폴리필로 활용하는 것이 좋아요.

결론

CSS @property 규칙은 커스텀 속성에 타입을 부여해 그라데이션, 숫자, 각도 등의 부드러운 애니메이션을 가능하게 합니다. JavaScript 없이 순수 CSS만으로 복잡한 애니메이션을 구현할 수 있어 성능과 유지보수 측면에서 큰 장점이 있어요. 브라우저 지원 범위를 확인하고 프로젝트에 적용해보세요.