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

2023年9月22日

URLをコピーしました！

@propertyを使って登録したカスタムプロパティはアニメーション可能であること知りました。

シンプルなカウントアップアニメーションがCSSのみでできることを知り、驚きました。

@propertyについてはこちら↓

ユイトブログ

【CSS】@property構文を使ってカスタムプロパティ（CSS変数）にルールを定義する @propertyを使ってカスタムプロパティにルールを設定する方法について学びました

サンプルとコード

今回関係のあるコードです↓

@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;
  }
}

@propertyでカスタムプロパティを登録しない場合、値が0から100にすぐ切り替わります↓