숫자 CSS 변수 보간

CSS에서 변수를 매우 쉽게 만들 수 있습니다.

:root {
  --scale: 1;
}

그리고 모든 요소에 선언할 수 있습니다.

.thing {
  transform: scale(--scale);
}

이와 같은 예에서는 사용자 상호작용에 변수를 적용하는 것이 더 좋습니다. :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

하지만 애니메이션에서 그 변수를 사용하고 싶다면…

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

변수가 문자열로 인식되고 두 숫자 값 사이에 보간할 수 있는 숫자가 필요하기 때문입니다. 그것이 우리가 부를 수 있는 곳입니다 @property 변수를 사용자 정의 속성으로 등록할 뿐만 아니라 해당 구문을 숫자로 정의합니다.

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

이제 우리는 애니메이션을 얻습니다!

당신은 원할거야 브라우저 지원 확인 이후 @property Chrome에만 상륙했습니다. 버전 85) 이 글을 쓰는 현재. 그리고 당신이 냄새를 맡길 희망한다면 @supports, at-rules를 값으로 받아들이지 않기 때문에 우리는 현재 운이 없습니다. 한 번 바뀌겠지 at-rule()현실이 된다.