CSSのfont-variation-settingsプロパティでの文字の可変アニメーション

webサイトでアニメーションを実装する中で、JavaScriptなどのプログラミングではなくCSSのみでデザインできることも増えてきました。

今回は、CSSのfont-variation-settingsプロパティを利用したテキストの可変アニメーションの実装についてご紹介します。

font-variation-settingsプロパティは、Variable Font（バリアブルフォント）の概念を利用して、CSSのみでテキストのアニメーションを実装することができます。
Variable Fontは、太さ、幅、高さ、コントラスト、角丸などを数学的アルゴリズムで調整できるよう作られたフォントです。数値を変更することで可変に対応することができます。

現在では多くのwebブラウザに対応してきているので今後、利用することが増えてくるでしょう。

気になるブラウザ対応ですが、
Variable Font、font-variation-settingsが利用できるwebブラウザは以下のサイトで確認できます。

Can I use… Support tables for HTML5, CSS3, etc
https://caniuse.com/#search=font-variation-settings

Google Chrome、Firefox、Safari、Edgeといった主要ブラウザは対応しています。
IEを気にしないのであれば全然使えます。

普通のフォントではfont-variation-settingsプロパティは利用できません。
可変が可能なVariable Fontは、以下のサイトなどでいくつかダウンロードできます。

Variable Fonts
https://v-font s.com/

Licensingは、Open source（オープンソース）をものを選ぶと良いでしょう。

今回はサンプルとして、League Spartan Variableを選びました。
ダウンロードしたフォントデータは、CSSで読み込んで利用していきます。

それでは、どのように実装するのか見ていきましょう。

font-variation-settingsプロパティの利用

まずはHTMLのマークアップから。
簡単なサンプルとしてセクションに見出しとテキストを用意してみます。

HTML

<section>
  <h2>Thinking...</h2>
  <p>Example text... Example text... Example text...</p>
</section>

ここからCSSのVariable Fontとfont-variation-settingsプロパティを利用して、アニメーションを実装していきます。

はじめに「@font-face」で可変フォントを設定します。
設定したフォントは「myfont」としておきます。
フォントURLのパスはご自身のディレクトリに合わせてください。

font-variation-settingsでは、変更したい特性の軸名と値を指定します。

軸名：CSSプロパティ

wght ： font-weight
wdth ： font-stretch
slnt ： font-style: oblique + angle
ital ： font-style: italic
opsz ： font-optical-sizing

今回は、「wght」と「wdth」を指定して、フォントの太さと幅をコントロールしてみます。
カンマ区切りで複数の軸を指定できます。

CSS

@font-face {
  font-family: 'myfont';
  src: url('../font/LeagueSpartanVariable.ttf') format('truetype');
}

section {
  min-height: 100vh;
  background-color: #f7f7f7;
  text-align: center;
}

h2 {
  font-family: 'myfont', sans-serif;
  color: #ff8c00;
  font-size: 5rem;;
  font-weight: 100;
  font-variation-settings: 'wght' 100, 'wdth' 70;
  animation: anime 5s infinite;
}

p {
  font-size: 1.3rem;
}

@keyframes anime {
  35% {
    font-variation-settings: 'wght' 100, 'wdth' 70;
  }
  50% {
    font-variation-settings: 'wght' 400, 'wdth' 100;
  }
  60% {
    font-variation-settings: 'wght' 100, 'wdth' 70;
  }
}

アニメーションを実装する要素に、font-familyで可変フォントを指定しました。

animationプロパティで「animation-nameの値、 animation-durationの値、 animation-iteration-countの値」を1行で指定しています。
「アニメーション名、アニメーションの長さ、アニメーションの繰り返しに関する値」という設定です。

1回のアニメーションの5秒として、infiniteでアニメーションを無限ループで繰り返しています。
そして、@keyframes（キーフレーム）でアニメーションの処理を記述します。
font-variation-settingsプロパティの値を変更させます。フォントの太さと幅を太く広くしてまた元に戻すといったアニメーションに。

以下、実際のアニメーションの実装になります。

動画（3分ほど）