CSSデジタルアニメーションは、たとえば、1から2に変化し、2から3に変更し、3から4に変更して、指定された時間を続けることを想像してください。それはカウンターのようなものですが、ウェブ上でアニメーションを設計するために使用するのと同じアニメーションによって制御されます。これは、ダッシュボードのようなものを設計するときに役立ち、数字に活力を加えることができます。 驚くべきことに、これは多くのスキルなしでCSSで可能になりました。 必要に応じて新しいソリューションにまっすぐジャンプすることができますが、まずがどのようにそれを行うかを見てみましょう。

アニメーション番号のかなり論理的な方法は、JavaScriptを介して数値を変更することです。かなりシンプルなsetintervalを実行できますが、ここでは、開始値、最終値、および持続時間を受け入れる関数を使用するより高度な答えを次に示します。そのため、アニメーションのように扱うことができます。

CSSのみを使用する場合、CSSカウンターを使用して、異なるキーフレームでカウントを調整することで数値をアニメーション化できます。

もう1つの方法は、すべての数字を連続して並べて位置をアニメーション化し、一度に1つの数字のみを表示することです。

これらの例の重複コードの一部は、パグ（HTML用）やSCSS（CSS用）などの前処理者を使用してループを提供し、管理を容易にしますが、基本的なアイデアを見ることができるように、意図的にネイティブコードを使用して、意図的にネイティブコードを使用します。

新しいCSSソリューション

css.registerpropertyと@propertyの最新のサポートを使用トリックは、CSSカスタムプロパティを整数として宣言することです。これにより、他の整数と同じように補間することができます（たとえば、変換など）。

@property -num { 構文： '

'; 初期値：0; 継承：false; } div { トランジション：-Num1S; カウンターリセット：num var（ - num）; } Div：Hover { -NUM：10000; } div ::後{ コンテンツ：カウンター（num）; }

重要な注意：

執筆時点で、この@Property構文はChrome（およびEdgeやOperaなどの他のChromiumカーネルブラウザー）によってのみサポートされているため、クロスブラウザー互換性はありません。 Chromeのみのアプリ（電子アプリなど）を構築している場合は、すぐに使用できます。上記のデモには、より広範なサポートがあります。

@property --num {
  syntax: '';
  initial-value: 0;
  inherits: false;
}

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}

値のみが出力できるため、数字を文字列に変換するためにカウンターを使用する必要があります。 他のアニメーションのようにアニメーションを緩和できるかどうかを確認しますか？超クール！

典型的なCSS変数は@keyframes：でも使用できます。 欠点？カウンターは整数のみをサポートします。これは、小数と分数が考慮されないことを意味します。何らかの方法で整数部と小数部を個別に表示する必要があります。

小数をアニメーション化できますか？

小数（-numberなど）を整数に変換できます。これがその仕組みです：

a

css変数（たとえば-integer）を登録し、初期値を指定します。

次に、calc（）を使用してラウンド：--integer：calc（var（ - number））

この場合、-numberは最寄りの整数に丸くなり、結果を-integerに保存します。
1. @property -integer { 構文： ""; 初期値：0; 継承：false; } - 番号：1234.5678; -integer：calc（var（ - number））; / * 1235 */
整数部品のみが必要な場合があります。これを行う賢い方法があります：-integer：max（var（ - number） - 0.5、0）。これは正の数に当てはまります。この方法では、calc（）も必要ありません。
/ * @property-integer */ - 番号：1234.5678; -integer：max（var（ - number） - 0.5、0）; / * 1234 */

同様の方法で分数部分を抽出してから、カウンターを使用して文字列に変換できます（ただし、コンテンツ値は文字列でなければならないことを忘れないでください）。接続された文字列を表示するには、次の構文を使用します。

content： "string1" var（ - string2）counter（ - integer）...

@property --integer {
  syntax: "";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */

その他のヒント

/* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

ああ、別のトリックがあります。JavaScriptを使用して、カスタムプロパティの計算値を取得して値をデバッグできます。

getComputedStyle（element）.getPropertyValue（ ' - 変数'）

content: "string1" var(--string2) counter(--integer) ...

それでおしまい！今日のCSS機能は素晴らしいです。