背景が伸びる見出し

お疲れ様です。

投稿は2日ぶりですが、タイトルの内容の勉強をちまちまとしておりました。
そのまとめです。

#about-main {
  line-height: 70px;
  background: linear-gradient(90deg, #ffe4c4, #ffe4c4 50%, #fff 50%, #fff);
  background-size: 200% 100%;
  padding: .1rem 1rem;
  color: #ff8c00;
}

// 自己紹介のアニメ
const aboutMain = document.querySelector('#about-main');

const keys = {
  color: ['transparent', '#fff'],
  backgroundPosition: ['100% 0', '0 0'],
};

const op = {
  duration: 1000,
  // アニメが変化する速度、タイミング（開始と終了を緩やかに）
  easing: 'ease',
};

aboutMain.animate(keys, op);

上のコードで、背景の位置を動かして、まるで左からぐーんと伸びているようにするアニメーションができました。
今回参考にしたのは、いつもの「1冊ですべて身につく入門講座」の本です。
cssの linear-gradient は2色以上の色が段階的に変化する、いわゆるグラデーションと、角度の指定（90degの部分）を書きます。

そして、jsの backgroundPosition で背景画像の位置を指定します。
最初の'100% 0'の数値は水平で、後ろの'0 0'は垂直を表します。
このコードだと、左から右へぐーんと伸びていくようなアニメーションになり、-100% 0 とすれば逆に右から左にぐーんと伸びるように変化しました。

せっかく実装して、うまく動作してくれましたので、これも自己紹介ページの見出しに実装してきました