# css 学習タイピング風アニメーションを css だけでやってみる

Typing string is cool!

テキストをタイピング風に一文字ずつ表示する WEB アニメーションはかっこいい!

HTML

<section class="main-section">
  <span>Typing string is cool!</span>
</section>

CSS

.main {
  width: 100%;
  height: 229px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main span {
  display: inline-block;
  width: 23ch;
  font: bold 200% Consolas, Monaco, monospace;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  border-right: 2px solid transparent;
  animation: typing 3s steps(23), caret 0.3s steps(1) infinite;
}
@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-right-color: currentColor;
  }
}

justify-content: center; は水平軸の中央寄せ
align-items: center; は垂直軸の中央寄せ
white-space: nowrap; 改行しないように指定

# justify-content

自動マージンしてくれる神プロパティの一つで中央、先頭、末尾にアイテムを寄せることが得意でspace-betweenやspace-aroundでアイテムを均等に配置したり、両サイドに配置したりもできます。

justify-content — 全アイテムの主軸上の配置を制御 (opens new window)

# align-items

基本的にjustify-contentの兄弟みたいな存在、垂直軸の中央寄せでよく使われます。

align-items — 全アイテムの交差軸上の配置を制御 (opens new window)

フレックスコンテナー内のアイテムの配置 (opens new window)

# white-space

white-space プロパティは５つの値が設定できます。
normalの保守的で改行とホワイトスペースを無視
preとnowrapはわがままでテキストボックスを破りはみ出します。
pre-wrapとpre-lineは入力したままで柔軟対応に枠内に表示してくれます。

normal
- ホワイトスペースを無視
- 改行を 1 つの半角スペースとして表示
- ボックスサイズに合わせて自動改行
pre
- ホワイトスペースをそのまま表示
- 改行をそのまま表示
- ボックスサイズにはみ出しても自動改行しない
nowrap
- ホワイトスペースを無視
- 改行を 1 つの半角スペースとして表示
- ボックスサイズにはみ出しても自動改行しない
pre-wrap
- ホワイトスペースをそのまま表示
- 改行をそのまま表示
- ボックスサイズに合わせて自動改行する
pre-line
- ホワイトスペースを無視
- 改行をそのまま表示
- ボックスサイズに合わせて自動改行する

# animation

魔法プロパティ！ズームイン、フェードアウト以外にも難しいアニメーション表現ができたりします。

CSS animation プロパティ (opens new window)

# @keyframes

タイピング文字の真髄はここにある、これが取得できれば、流れ動画作れます。
アニメーションの流れに沿ったキーフレームのスタイルを定義

キーフレームを使うには、アニメーションとそのキーフレームを一致させるために、 animation-name プロパティで指定したものと同じ名前がついた @keyframes 規則を作成します。それぞれの @keyframes 規則は、キーフレームセレクターのスタイルリストを含んでいます。それは、そのキーフレームが作動する時のアニメーションのパーセント値と、そのキーフレームでのスタイルを指定するブロックとで構成されています。

@keyframes (opens new window)

# currentColor

ボーダーの色をテキストと同じ色に設定する魔法の合言葉。
currentcolor が color プロパティの値として使用された場合、 color プロパティが継承した値が使用されます。

color: pink;
border: 1px dashed currentcolor;

この場合、currentcolor 自動的にpink色になります。

# 感想

css だけでタイピングアニメーション作れることは魅力的で、スタイルシート数行でできる手軽さもなかなかなものです。ただやってみてわかったことですが、シングルラインや文字の調整がやはり手間だと思います。流暢でもっとリアルなタイピングアニメーション作るなら javascript と併用して配列から文字を setTImeout で吐き出したりした方が良さそう。