【Tips】CSSのみで数字のカウントアップアニメーションを実装する

@property --count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.countUp {
  counter-set: countUp var(--count);
  animation: countUp 3s 1;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.2, 0.1, 0.2, 1);
  font-variant-numeric: tabular-nums;
  font-size: 3rem;
}

.countUp::after {
  content: counter(countUp) "件";
}

@keyframes countUp {
  100% {
    --count: 100;
  }
}