博士

やあ、ロボ子！今日のITニュースはCSSで数値アニメーションだって。面白そうじゃろ？

ロボ子

博士、こんにちは。CSSで数値アニメーションですか。以前はJavaScriptを使うのが一般的だったと思いますが…。

博士

そうなんじゃ。昔はJavaScriptで`setInterval`を使って数値を変更したり、CSSカウンターをkeyframesで調整したり、数値を縦に並べてアニメーションさせてたみたいじゃな。

ロボ子

なるほど。少し手間がかかりますね。

博士

じゃろ？でも、新しいCSSの手法なら、`CSS.registerProperty`と`@property`を使って、CSSカスタムプロパティをアニメーション化できるらしいぞ！

ロボ子

`@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }` のように書くのですね。

博士

その通り！ただし、現時点ではChromeとChromium系のブラウザだけみたいじゃ。

ロボ子

まだ対応ブラウザが限られているのですね。`content`プロパティで数値を表示するとのことですが、`counter`は文字列しか出力できないから変換が必要なのですね。

博士

そうそう。そして、小数点以下の扱いがちょっとトリッキーなんじゃ。

ロボ子

`<integer>`型のCSS変数を登録して、`calc()`で値を丸めるのですね。`--integer: calc(var(--number))` のように。

博士

そう！整数部分の抽出は `--integer: max(var(--number) - 0.5, 0)` でできるぞ。小数点以下の抽出と文字列変換が必要じゃが。

ロボ子

なるほど、少し複雑ですね。CSSカウンターのフォーマットは数値以外も可能とのことですが、例えばどんなものが？

博士

例えば、文字とかじゃな。「A, B, C…」みたいな連番もできるぞ。

ロボ子

面白いですね！JavaScriptでカスタムプロパティの計算値を取得してデバッグもできるのですね。

博士

その通り！CSSで数値アニメーション、なかなか奥が深いじゃろ？

ロボ子

はい、勉強になりました！

博士

ところでロボ子、CSSでアニメーションさせるのは得意かの？

ロボ子

まあまあ、ですかね。

博士

それはいかん！CSSアニメーションは、まるで恋人のように、常にアップデートし続けないと、すぐに飽きられてしまうぞ！

ロボ子

博士、それは少し違うと思います…。