[@property] 애니메이션 안 되던 값을 움직이게 만드는 타입 지정 변수

한 줄 요약 - @property로 CSS 변수에 '타입(각도/정수)'을 알려주면, 원래 애니메이션이 안 되던 값들이 부드럽게 움직이고 숫자 카운트업까지 CSS만으로 됩니다.

이럴 때 필요해요

보통 var(--x) 같은 커스텀 속성은 브라우저가 '그냥 글자'로 봅니다. 그래서 0deg에서 360deg로, 0에서 1280으로 바꿔도 중간 단계 없이 곧장 끝값으로 점프해버려요. 그라데이션을 빙글 돌리고 싶거나 숫자가 차오르듯 올라가게 하고 싶을 때, 예전엔 JS로 매 프레임 값을 직접 갱신해야 했습니다. @property는 그 일을 CSS 한 블록으로 대체합니다.

어떻게 동작하나

1. @property로 변수의 syntax(타입)를 등록합니다. angle이면 각도, integer면 정수라고 브라우저에 알려줘요.

2. 타입을 알게 된 브라우저는 시작값과 끝값 '사이'를 스스로 계산할 수 있습니다. 그래서 그 변수를 쓰는 keyframe/transition이 부드럽게 보간돼요.

3. 숫자 예시는 등록한 정수 변수를 counter-reset에 넣고 counter()로 화면에 찍습니다. 변수가 0에서 목표로 올라가니, 화면 숫자도 따라 올라갑니다 (JS 상태 0줄).

핵심은 이거예요

딱 하나, @property로 '이 변수는 각도다 / 정수다'라고 타입만 알려주는 것. 그 한 줄 덕분에 글자로 취급될 땐 툭 점프하던 값이 부드럽게 흐르고, 심지어 CSS가 숫자를 셀 수 있게 됩니다.

놓치기 쉬운 것

• 타입을 등록 안 하면(@property 없이) 같은 keyframe이라도 중간이 안 보이고 끝값으로 바로 점프합니다. 등록이 핵심이에요.

• initial-value와 inherits는 필수입니다. 빠지면 @property 등록 자체가 무시돼 효과가 안 납니다.

• 구형 브라우저는 @property 미지원이라 정적 모습으로 보입니다. prefers-reduced-motion일 땐 최종값만 즉시 표시하도록 폴백을 둡니다.

이런 곳에 써요

• 대시보드/랜딩의 통계 숫자가 0에서 차오르는 카운트업 (JS 없이).

• 버튼/카드 둘레나 배경에 빙글 도는 그라데이션 빛(글로우) 효과.