한 줄 요약 - 그라데이션/모양으로 요소를 오려내는 mask-image와, 원래 애니메이션이 안 되던 값을 움직이게 하는 @property. 둘 다 주요 브라우저에 안착해 바로 쓸 수 있습니다.
mask-image
이미지 아래를 부드럽게 페이드해 다음 콘텐츠와 잇거나, border-radius로는 안 되는 곡선/별 모양으로 콘텐츠를 오려내고 싶을 때 씁니다. 마스크는 '색'이 아니라 '불투명도'로 판단해서, 검은(불투명) 부분은 보이고 투명한 부분은 잘립니다. linear-gradient면 가장자리 페이드, radial-gradient면 스포트라이트가 돼요. 사파리 호환을 위해 -webkit-mask- 접두사를 함께 적는 것만 잊지 마세요.
@property
보통 CSS 변수(var(--x))는 브라우저가 '그냥 글자'로 봐서, 0deg에서 360deg로 바꿔도 중간 없이 툭 점프합니다. @property로 그 변수의 타입(각도/정수)을 등록하면, 브라우저가 사이값을 계산할 수 있어 그라데이션 회전이 부드러워지고 심지어 숫자 카운트업도 JS 없이 CSS만으로 됩니다.
한 줄 정리
'색이 아니라 불투명도로 오리기', '타입을 알려줘 움직이게 하기'. 동작은 아래 관련 데모에서 확인하세요.