CSSアニメーション

Googleのフォントは、変数のフォントをサポートしています!それはかなりきれいです.



ジェイ🛠
JH 3 YY

ご存知ですか.🧐 今、変数のフォントを提供し、それをアニメーション化することを意味!😎🔥かなり楽しい!😁💻 経由でcodepen.io/jh3y/pen/OJMOm…
午前11時33分- 01月20日

可変フォントとは

変数のフォントに慣れていない場合.彼らはかなりクールだ.最大の勝利は、より少ないネットワーク要求でフォント変化にアクセスしています.これはあなたのフォントのファイルサイズを削減する結果!
すべてのクールな新機能で可能になった.実行時にweightやslantなどのフォントの特性を変更できるようにする機能.実用的な利点に加えて、我々はまた、これらの特性をアニメーション化することができます!
これらの特性を軸とする.そして、変数のフォントはすべてをサポートする必要はありません、それは1つまたは2つだけをサポートすることを選択することがあります.
アクシスネーム
CSS値
重量
ワッ
幅
WDTH
スラント
SLNT
光学サイズ
OPSZ
イタリック体
臨床
グレード
研究室
可変フォントの詳細については、check this article!

では、Googleのフォントはどうですか？

さて、Googleフォントから変数のフォントを使用するときにははっきりしないことがあります.どのようにフォント全体を取得するのですか?
我々は“Robotoモノ”を選択し、それを設定してみましょう.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

h1 {
  font-family: 'Roboto Mono', monospace;
}

これで変数のフォント設定を変更することにしました.我々は、“Robotoモノ”“可変重量軸”をサポート知っている.我々が我々の例で重さを更新しようとするならば、何も起こりません..

h1 {
  font-variation-settings: 'wght' 300;
}
h1 {
  font-variation-settings: 'wght' 700;
}

うーん.何が悪いの?
我々は特定の重量をチェックアウトし、“選択このスタイル”を使用する場合、我々は我々が欲しい重みをつかむことができます!

そして、我々のCSSを更新することは、その重さを反映します.
多くの重みについては、重みをセミコロンで入力します.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;700&display=swap')

より高いwghtに移行するこのデモの単語をホバー.
私はここで何か面白いことに気づいた.範囲から任意の2つの値を入力し、全体の範囲にアクセスする必要があります!
例えば、ここでは

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@699;700&display=swap')

しかし、私はまだ全体のサポート範囲からウェイトにアクセスする必要があります.
これが将来変わるのだろうか.それとも、任意の2つの値を入力する場合は、変数のバージョンを必要とする事実をトリガ?

どのように我々はそれらをアニメーション化するのですか？

通常のCSSアニメーションとは異なりません.“フォントバリエーション設定”プロパティをアニメーション化できます.

@keyframes breathe {
  50% {
    font-variation-settings: 'wght' 700;
  }
}

ここでは、下と上のバンドを指示するいくつかの変数を使用します.
どのように我々はさらにそれを取るし、文字をたたくか?このため、HTMLで文字を分割できます.

<h1>
  <span style="--index: 0">W</span>
  <span style="--index: 1">a</span>
  <span style="--index: 2">a</span>
  <span style="--index: 3">a</span>
  <span style="--index: 4">v</span>
  <span style="--index: 5">e</span>
</h1>

そして、どのようにインラインインデックスのためにインラインCSS変数を使用しているかに注目してください.我々は、文字のアニメーション遅延を指示するために使用することができます.スコープ指定された変数はCSS以下です.

h1 span {
  animation-delay: calc((var(--index) - 6) * 0.25s);
}

そして、それは我々にこれを与えます.
我々はもう少しそれを取ることができるいくつかの色を追加し、言葉をスタック😎 我々はいくつかのCSSの変換を持っているものにミックスし、私たちができる束がある!
私のオリジナルデモのために、私はGreensockと分割と一緒に何かを投げました.
しかし、CSSだけでは似ていない理由はない.
私たちは同じようなキーフレームを作成することで飽和を交換することができます.

@keyframes rise {
  50% {
    font-variation-settings: 'wght' var(--upper);
    color: hsl(var(--hue), 80%, 65%);
  }
}

それだ！

Googleのフォントからいくつかの変数のフォントをつかむし、遊びを持っている!私はまだすべてのフォントをまだ行っていない.それでも、私はweight軸の支持を見ました.
あなたが他の軸を支持する何かを見つけるならば、知らせてください!
任意の良い変数のフォントリソースを得たか.私はそれらを見たい!
いつものように、私はあなたが言うことを聞くのが大好きだ.コメントを残してください