CSSアニメーションで「エア嵐コール」を作ってみた その2(step編)

前回、「あーらーし!!」の文字がが右から左に流れる「エア嵐コール」なるものを作りました。

あわせて読みたい

CSSアニメーションで「エア嵐コール」を作ってみた

ただ、これだと”コールとしてのリズム感”に欠ける気がしたので、別バージョンを作ってみました。一体私は何に情熱を注いでいるんだろうか。

まずは完成形をご覧ください。

See the Pen Air ARASHI Call (Steps) by さわ (@rily0486) on CodePen.

文字がリズムに乗って表示されることによって、よりコールっぽくなりました(?)

（15分くらいで書いたので、色気も素っ気もないのはご愛嬌）

サンプルHTML

まずはHTML。

<div class="wrap">
  <p>
    <span class="char1">あー</span>
    <span class="char2">らー</span>
    <span class="char3">し!!</span>
  </p>
</div>

今回は文字を順番に表示するため、「あー」「らー」「し!!」と3分割の要素にしています。

CSSアニメーション

CSSアニメーションはこちら。

.char1 {
  animation: char1 3s step-start infinite;
}

.char2 {
  animation: char2 3s step-start infinite;
}

.char3 {
  animation: char3 3s step-start infinite;
}

@keyframes char1 {
  0%{ visibility: hidden; }
  25%{ visibility: visible; }
  50%{ visibility: visible; }
  75%{ visibility: visible; }
  100%{ visibility: hidden; }
}

@keyframes char2 {
  0%{ visibility: hidden; }
  25%{ visibility: hidden; }
  50%{ visibility: visible; }
  75%{ visibility: visible; }
  100%{ visibility: hidden; }
}

@keyframes char3 {
  0%{ visibility: hidden; }
  25%{ visibility: hidden; }
  50%{ visibility: hidden; }
  75%{ visibility: visible; }
  100%{ visibility: hidden; }
}

各文字パーツごと（.char1,.char2,.char3）に@keyframesでアニメーションを設定。

基本的な動きは3つとも同じ。visibilityで文字の表示/非表示を切り替えています。

アニメーションのタイムラインは下記の通り。

animationプロパティは、animation: (animation name) 3s step-start infinite;を指定。

step-startを指定することで、%で指定した状態に「段階的に」変化します。

（easeやlinearは、0%→100%まで、滑らかに変化する）

3秒で0%,25%,50%,75%,100%の段階的なアニメーションを繰り返す

というのが今回の設定です

これで、リズム感溢れる(はい?)エア嵐コールのできあがり。

おまけ：HTML4時代の文字点滅といえば<blink>タグ

古きHTMLにおいては、文字が点滅する装飾に<blink>タグが使われておりました。

今回のような、表示時間の長さを変化させるような複雑な指定はできませんでしたが。

こちらも<marquee>タグ同様、HTML5で廃止。

CSSアニメーションで実装可能とはいえ、文字を点滅させる装飾をしているサイトは今時すっかり見かけなくなりました。

90年代~00年代初頭くらいは、<marquee>や<blink>を多用したサイト全盛期だった気がしますw時代ですねぇ…

参考にしたページ

参考

transition-timing-function 「変化の速度」

参考

CSS opacity:0、visibility:hidden、display:noneどれをアニメーションで使うべきか

さわ

webエンジニア

Twitter

webサイト制作をメインとして、フロントからインフラまで広くかじっているIT屋さんをやっています