CSSでそれっぽいタイトルアニメーションをつける

2020/11 から始まった、ものづくりをする高校生のための新しい団体、Palettteが主催する Palettte Advent Calendar 2020 の7日目の記事です。

---

現行のPalettteのサイトが勢いで作ったものでわかりにくいなー、ということで1から作り直していて、その中でせっかくなので今まで逃げていたCSSアニメーションと戦うことにしました。

CSSアニメーションはCSSだけでサイトに動きを加えるというもので、yui540さんのポートフォリオが今まで見た中では一番すごかった(語彙力)です。

(その新規サイトを作っていたら7日の18時に...。焦って書いているので前半はかさ増しです。完成物は本題のところに乗っかています。すみません。)

@keyframes アニメーション名 {
  from {
    // 最初のCSS
  }
  to {
    // 最後のCSS
  }
}

@keyframes アニメーション名 {
  0% {
    // 最初のCSS
  }
  50% {
    // 50%時点でのCSS
  }
  100% {
    // 最後のCSS
  }
}

というような形でかけます。

左から右に現れて文字だけ残るCSSアニメーションという記事を参考に作ろうとしたものの、タイトルの文字と背景を最初隠して途中で表示させる方法がわからず...

最初に作ったやつ

(タイトルが最初から表示されてしまっていた)

Scrapを作って試行錯誤していたらだいぶ時間がかかってしまいましたが一応それっぽいものができたのでそれを紹介しておきます。

本題

メインの要素を囲うdivを作りその背景色を変化させ、before要素をh1のものではなく囲ったdivのものを使い、テキストも途中で表示するようにして作りました。