番号カウンターをアニメーション化します

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

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

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

別の方法は、すべての数字を連続して並べて位置をアニメーション化することです。

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

新しいCSSソリューション

CSS.RegisterPropertyと@Propertyの最新のサポートにより、 CSS変数をアニメーション化できます。トリックは、CSSカスタムプロパティを整数として宣言することです。これにより、他の整数と同じように補間することができます（例：変換）。

 @property -num {
  構文： '<integer> ';
  初期値：0;
  継承：false;
}

div {
  トランジション：-Num1S;
  カウンターリセット：num var（ -  num）;
}
Div：Hover {
  -NUM：10000;
}
div ::後{
  コンテンツ：カウンター（num）;
}</integer>

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

CSSコンテンツプロパティは数値を表示するために使用できますが、コンテンツを出力のみができるため、数字を文字列に変換するためにカウンターを使用する必要があります<string></string>価値。

他のアニメーションのようにアニメーションを緩和できるかどうかを確認しますか？超クール！

タイプされたCSS変数は、@KeyFramesでも使用できます。

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

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

小数（-numberなど）を整数に変換できます。これがどのように機能するかです：

1. 1つを登録します<integer></integer>CSS変数（たとえば、-Integer）と初期値を指定します。
2. 次に、calc（）を使用してラウンド：-integer：calc（var（ - number）））

この場合、-numberは最も近い整数に丸くなり、結果を-integerに保存します。

 @property -integer {
  構文： "<integer> ";
  初期値：0;
  継承：false;
}
 - 番号：1234.5678;
-integer：calc（var（ -  number））; / * 1235 */</integer>

整数部品のみが必要な場合があります。これを行う賢い方法があります：-integer：max（var（ - number） - 0.5、0）。これは正の数に当てはまります。この方法では、calc（）も必要ありません。

 / * @property -integer */
 - 番号：1234.5678;
-integer：max（var（ -  number） -  0.5、0）; / * 1234 */

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

コンテンツ： "String1" var（ -  string2）counter（ -  integer）...

小数の割合でアニメーション化する完全な例を次に示します。

他のヒント

CSSカウンターを使用しているため、これらのカウンターの形式は数値以外の形式であることができます。 「CSS」を「はい」にアニメーション化する例は次のとおりです。

ああ、そして別のトリック：JavaScriptを使用して、カスタム属性の値をデバッグできます。

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

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

以上が番号カウンターをアニメーション化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。