소개

CSS 애니메이션은 아이디어에 따라 다양할 수 있습니다.
이번 CSS 애니메이션만으로, 숫자가 빙글빙글 상승하는 표현을 구현해 보았으므로 소개합니다.
수동으로 쓰면 힘들지만 전처리기를 사용하여 쉽게 실현할 수 있었습니다.

후술하는 유감 포인트에 눈을 감으면 의외로 실용성은 있을지도 모릅니다.
그럼 시작!

※chrome에서 동작 확인했기 때문에, 샘플 코드에는 -webkit-접두사만이 붙어 있습니다.

[동작 이미지]


또한 실제 동작은 아래에서 확인할 수 있습니다.
ht tp // 코데펜. 이오 / 고양이 고양이 완완 / 펜 / ㅇ wj p

샘플 코드

index.html

<div class="numbers"></div>

style.scss

.numbers {
  /* 数値の加算とは直接関係ありません */
  font-size: 50px;
  -webkit-animation: 'zoom-in-out' 0.3s ease 2s;

  /* ここから必須 */
  &::after {
    content: '0';
    -webkit-animation:'number-roll' 2s ease 0s forwards;      
  }
}

/**
 * 数字にカンマを付けて返す強引な関数
 * ※もっとスマートにしたい
 * @param  {number} $num [元の数字]
 * @return {string} [カンマ付きの数字を文字列として返す]
 */
@function commaSeparate($num) {
  $result: $num !default;
  @if $num > 1000 {
    $result: str-insert(inspect($num), ',', -4);
  }
  @if $num > 1000000 {
    $result: str-insert(inspect($num), ',', -4);
    $result: str-insert($result, ',', -8);
  }
  @if $num > 1000000000 {
    $result: str-insert(inspect($num), ',', -4);
    $result: str-insert($result, ',', -8);
    $result: str-insert($result, ',', -12);
  }
  @return $result;
}

/* 数字上昇アニメーション */
@keyframes number-roll {
  $startNum: 0; // 初期値（好きに変更可能）
  $endNum: 7777777; // 終了値（好きに変更可能）
  $val: 0 !default;

  @for $i from 0 through 100 {
    #{$i}% {
      $val: floor(($startNum +  ($endNum - $startNum) / 100 * $i));
      content: "" + commaSeparate($val) + "";
      opacity: $i / 100;  // 数値の加算とは直接関係ありません
    }
  }
}

/* 数値上昇完了後に実行する（本筋とは無関係です） */
@keyframes zoom-in-out {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

포인트

div.numbers::after 요소에 내용으로 텍스트를 저장합니다

keyframes의 0%->100%에 따라 종료 값에 도달 할 때까지 숫자를 더합니다

숫자의 세 자리마다 쉼표를 추가하고 싶은 전용 기능을 제공합니다

진짜는 sass의 디폴트 기능만으로 3자리수 단락을 구현하고 싶었습니다만, 하는 방법을 모르게 강인하게 되어 버렸습니다. 확장없이 잘 할 수있는 방법이 있다면 교수하십시오 ...

하는 일은 간단하며 CSS에 더러운 값을 쓰는 것입니다.

컴파일된 style.css

.numbers {
  font-size: 50px;
  -webkit-animation: 'zoom-in-out' 0.3s ease 2s;
}
.numbers::after {
  content: '0';
  -webkit-animation: 'number-roll' 2s ease 0s forwards;
}
@keyframes number-roll {
  0% {
    opacity: 0;
    content: "0";
  }
  1% {
    opacity: 0.01;
    content: "77,777";
  }
  2% {
    opacity: 0.02;
    content: "155,555";
  }
  /* ... 略 ... */
  100% {
    opacity: 1;
    content: "7,777,777";
  }
}
/* ... 略 ... */

불행한 포인트

기다리지 않는 유감스러운 포인트입니다!

CSS 비대화

동적 수정이 불가능함

지원되지 않는 브라우저 존재

SEO로는 좋지 않을 것

CSS 비대화
keyframes내에서 1%단위마다 프롭퍼티를 정의하고 있으므로, 아무래도 컴파일 후의 코드량이 커져 버립니다. 게다가 prefix가 붙은 새벽에는...

또한 아래와 같이 프레임 당 퍼센트 상승률을 높임으로써 코드량을 억제할 수도 있습니다. ※당연히 애니메이션의 매끄러움은 떨어집니다만

백분율 상승률 증가.scss

@for $i from 0 through 20 {
  #{$i * 5}% {
    $val: floor(($startNum +  ($endNum - $startNum) / 100 * $i * 5));
    opacity: $i * 5 / 100;
    content: "" + commaSeparate($val) + "";
  }
}

백분율 상승률 증가 .css

0% {
  opacity: 0;
  content: "0";
}
5% {
  opacity: 0.05;
  content: "388,888";
}
10% {
  opacity: 0.1;
  content: "777,777";
}
/* ... 略 ... */

동적 수정이 불가능
CSS 컴파일시에 모두 계산을 하고 있기 때문에, 문맥에 따라서 값을 바꾸는 등의 동작은 할 수 없습니다. 복잡한 것에는 솔직하게 JS를 사용합시다. 또 수치를 변경하고 싶은 경우에는, scss 파일의 수정과 컴파일이 필요하므로 수고입니다.

지원되지 않는 브라우저 존재
이것은 말할 필요도 없습니다.

SEO적으로는 좋지 않은 것 같다
after 의사 요소에 텍스트를 밀어넣기 때문에, SEO적으로 문제가 없다고는 별로 생각되지 않습니다. 만약 수치 자체에 중요한 의미가 있는 경우는, 별도 요소를 준비하거나 어떻게든 하는 것이 좋을지도 모릅니다.

끝에

어떻습니까? 약간의 악센트에 사용할 수 있을지도 모르겠네요!
나라면 어른스럽게 JS를 사용합니다.

[참고까지]
CSS 애니메이션을 다루기 위해 알아야 할 5 가지 사항