# 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-betweenspace-aroundでアイテムを均等に配置したり、両サイドに配置したりもできます。

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

# align-items

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

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

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

# white-space

white-space プロパティは5つの値が設定できます。
normal保守的で改行とホワイトスペースを無視
prenowrapわがままでテキストボックスを破りはみ出します。
pre-wrappre-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 で吐き出したりした方が良さそう。

2020-11-27
  • css

関連記事

Nuxt Fontawesome アイコン使う
シェアボタン SNS ソーシャルリンクの作り方
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
sass-loader エラー
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
google color palette
フルスクリーン背景画像の 100%表示と iPhone 対応方法
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる