CSS 디지털 애니메이션은 예를 들어, 숫자가 1에서 2로 변경 된 다음 2에서 3으로 변경 한 다음 3에서 4로 변경하여 지정된 시간 동안 지속됩니다. 카운터와 같지만 웹에서 애니메이션을 디자인하는 데 사용하는 것과 동일한 애니메이션으로 제어됩니다. 이것은 대시 보드와 같은 것을 디자인 할 때 유용 할 수 있으며 숫자에 활력을 더할 수 있습니다. 놀랍게도, 이것은 이제 많은 기술이없는 CSS에서 가능합니다. 원하는 경우 새로운 솔루션으로 바로 이동할 수 있지만 먼저 우리가 어떻게 사용했는지 살펴 보겠습니다. 애니메이션 번호의 다소 논리적 인 방법은 JavaScript를 통해 숫자를 변경하는 것입니다. 우리는 상당히 간단한 setInterval을 할 수 있지만, 여기에는 시작 값, 최종 가치 및 지속 시간을 받아들이는 함수를 사용하는보다 고급 답변이 있습니다.

CSS 만 사용하는 경우 CSS 카운터를 사용하여 다른 키 프레임에서 카운트를 조정하여 숫자를 애니메이션 할 수 있습니다.

또 다른 방법은 모든 숫자를 연속으로 줄이고 한 번에 하나의 숫자 만 표시하는 것입니다.

이 예제의 중복 코드 중 일부는 PUG (HTML의 경우) 또는 SCSS (CSS)와 같은 전처리자를 사용하여 관리하기 쉽지만 기본 아이디어를 볼 수 있도록 고의적으로 기본 코드를 사용할 수 있습니다.

새로운 CSS 솔루션

CSS.RegisterProperty 및 @Property에 대한 최신 지원을 통해 CSS 변수

를 애니메이션 할 수 있습니다. 속임수는 CSS 사용자 정의 속성을 정수로 선언하는 것입니다. 이를 통해 다른 정수 (예 : 변환)처럼 보간 할 수 있습니다.

@property --num { 구문 : ''; 초기 값 : 0; 상속 : 거짓; } div { 전환 : -num 1s; 카운터 리셋 : num var (-num); } div : 호버 { --num : 10000; } div :: 후 { 내용 : 카운터 (num); }

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

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}

작성 당시이 @property 구문은 Chrome (및 Edge 및 Opera와 같은 다른 Chromium 커널 브라우저)에 의해서만 지원되므로 교차 브라우저 호환되지 않습니다. 크롬 전용 앱 (예 : Electron App)을 구축하는 경우 즉시 사용할 수 있습니다. 그렇지 않으면 기다리십시오. 위에서 언급 한 데모는 더 넓은 지원을받습니다.

CSS 컨텐츠 속성은 숫자를 표시하는 데 사용될 수 있지만, 컨텐츠는

값 만 출력 할 수 있기 때문에 숫자를 문자열로 변환하기 위해 카운터를 사용해야합니다.

우리가 다른 애니메이션과 마찬가지로 애니메이션을 완화 할 수 있는지 확인하십시오. 매우 멋지다! 일반적인 CSS 변수는 @keyframes에서도 사용할 수 있습니다 :

단점? 카운터는 정수 만 지원합니다. 이것은 소수점과 분수가 고려되지 않음을 의미합니다. 우리는 정수 부분과 소수 부분을 어떤 식 으로든 별도로 표시해야합니다. 우리는 소수를 애니메이션 할 수 있습니까?

Decimals (예 : -number)를 정수로 변환 할 수 있습니다. 작동 방식은 다음과 같습니다.

register a

css 변수 (예 : -integer)를 지정하고 초기 값을 지정합니다.

그런 다음 calc ()을 사용하여 Round : --integer : calc (var (-number))
1. 이 경우 -number는 가장 가까운 정수로 반올림하여 결과를 -integer에 저장합니다.
@property-integer { 구문 : "
2. "; 초기 값 : 0; 상속 : 거짓; } -번호 : 1234.5678; --integer : calc (var (-number)); / * 1235 */

때때로 우리는 정수 부품 만 필요합니다. 이 작업을 수행하는 영리한 방법이 있습니다 : --integer : max (var (-숫자) -0.5, 0). 이것은 양수에 적용됩니다. 이 방법은 calc ()도 필요하지 않습니다.

/ * @property --integer */ -번호 : 1234.5678; --integer : max (var (-숫자) -0.5, 0); / * 1234 */

@property --integer {
  syntax: "";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */

컨텐츠 : "String1"var (-String2) 카운터 (-정수) ...

/* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

기타 팁

content: "string1" var(--string2) counter(--integer) ...

오, 또 다른 트릭이 있습니다 : 우리는 JavaScript를 사용하여 사용자 정의 속성의 계산 된 값을 얻을 수 있습니다.

getComputedStyle (요소) .getProperTyValue ( '-variable')

그게 다야! 오늘날의 CSS 기능은 놀랍습니다.