CSSでイイ感じに回るカウンターをつくる

CSSでイイ感じに回るカウンターをつくりたいなーと思うこと、ありますよね

つくりました

動き

• 表示させる数字は CSS 変数 --count で自由に変えられる
• 数字が変わる際は徐々に増減していく

桁表示

0～9 の数字が並んだ背景画像をリピートさせるだけ
表示位置が下にずれるほど数字がアップ

<div class="digit"></div>

.digit {
  width: 100px;
  height: 100px;
  background-image: url(numbers.png);
  background-size: auto 1000px;
  background-position: center calc(100px * var(--count));
}

数字の変化

徐々に変化させたい時、頼りになるのが transition
数字画像の表示位置に与えれば、くるくると回るアニメになります

transition: background-position 1s;

だけど今回は元となる変数の方をトランジションさせます
9 を超えて初めて十の位が増えるとか、桁を正しく増減させるなら
元となる数値の方を徐々に変化させるのがシンプル

transition: --count 1s;

そのため、変数が数値であることを予め @property で宣言しておきます

@property --count {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

これで徐々に増減する変数になりました

とはいえ、数字がくるくる回るアニメも欲しいので
結局は表示位置の方も軽めにトランジションさせるんですけども

上の桁

一の位は変数の値をそのままでよかった。しかし十の位はどうすればよいのか
そう。10 で割ればいいんですね

background-position: center calc(100px * var(--count) / 10);

けれど、このままだと表示位置が半端なことになります
例えば 9 の表示

十の位の数値が 0.9 になるので、そりゃほぼ 1 ですよね
というわけで round() の登場

CSS の計算でも三角関数が使えるように、という話題は割と見るようになりましたが
他にも、べき乗 pow() や余剰 mod() なども色々増えます

であれば、もちろん端数をどうこうする関数もありまして

切り上げたり、切り捨てたり、丸めたりたり、いろいろとデキるやつ
ステキ！
しかしこちら、現状では safari と firefox preview だけのようでして

ああ、chrome でも使えるようにならないかな……
と思っていたんですが
なんと chrome でも動きました！

ということで十の位の書き直し

background-position: center calc(100px * round(down, var(--count) / 10, 1));

これできっかりと数字が刻まれるように

あとはここまでをベースに実装や表示を見直して
冒頭のサンプルへ

おしまい

CSS 変数に値を反映させるまではスクリプトのちからですが
概ね CSS でイイ感じに回るカウンターと言ってもいいんじゃないでしょうか

正直、特に用途もなくつくりましたが
いつか @property や round() が安定して使えるようになったなら
活用も考えたいですね