CSSで出来る！タイピングアニメーションの実装方法を調べてみた

こんにちは朱夏です。

今回は、CSSで出来るタイピングアニメーションの実装方法を詳しく調べてみました。

朱夏

テキストがタイピングした時みたいに一文字ずつ表示させるエフェクトカッコイイからやってみたい！

でもどうやってつけるんだろう？

JavaScriptも勉強しないといけないのかな？

WEBサイトの学習し始めた頃、トップページがアニメーションで表示されるサイトを見て、「かっこいいなぁ、けど難しそう」って思ってました。

実は、CSSのanimationで実装できる様です。
実装方法について詳しく調べつつ、どうやって動いているかについても解明してみました。

それではいってみましょう。

[もくじ]
実装方法その１
その１の解説
実装方法その２
その２の解説
実行結果の比較
あとがき

実装方法その１

こちらのサイトを参考に作成しています。

PhotoshopVIP

CSS3の新体験！コピペできるテキストエフェクト用HTMLスニペット30個まとめ - Phot...

http://photoshopvip.net/93415

CSS3の進化によってこれまでは実現がむずかしかったデザインも、コードのみで作成、スタイリングできるようになってきています。今回は、コピペで利用できるテキストエフェクト用HTMLコードスニペットをまとめてご紹介します。CSS3など新しいテクニックで実現する手軽なテクニックが揃います。

先ずはコードと実行結果から見ていきましょう。

HTML

<div class="container-fluid">
   <div class="row topimg align-items-center">
      <div class="col-12">
         <h1 class="text-center text-light"><span class="typing">Typing Animation</span></h1>
      </div>
   </div>
</div>

<h1 class="text-center text-light"><span class="typing">Typing Animation</span></h1>

</div>

CSS

.topimg {
    background-color: #6C757D;
    height: 50em;
}

.typing {
    font-family: "Fira Mono", monospace;
    display: inline-block;
    position: relative;
    line-height: 1;
}

.typing:after {
    content: "";
    position: absolute;
    top:-1px;right:0;bottom:-2px;left:0;
    border-left: 1px solid #fff;
    background-color: #aaaaaa;
    animation: typinganimation 3s steps(17) infinite alternate;
  }

@keyframes typinganimation {
    0% {
        left: 0;
        margin-right: auto;
    }
    100% {
        left: 100%;
        margin-left: .5em;
        margin-right: -.5em;
    }
}

.topimg {

background-color: #6C757D;

height: 50em;

}

.typing {

font-family: "Fira Mono", monospace;

display: inline-block;

position: relative;

line-height: 1;

}

.typing:after {

content: "";

position: absolute;

top:-1px;right:0;bottom:-2px;left:0;

border-left: 1px solid #fff;

background-color: #aaaaaa;

animation: typinganimation 3s steps(17) infinite alternate;

}

@keyframes typinganimation {

0% {

left: 0;

margin-right: auto;

}

100% {

left: 100%;

margin-left: .5em;

margin-right: -.5em;

}

これでOKです。
実行結果はこんな感じになりました。

その１の解説

それでは解説していきます。

HTML編１

今回の実装について、絶対に必要になってくるのは以下の部分だけです。

<span class=”typing”>Typing Animation</span>

このspanに付与されたclass=”typing”に対してスタイルを適用していくことでアニメーションを実現させていきます。

CSS編１

それではCSS側のコードを見ていきます。

先ずは最初のセレクタ。
ここではフォントを指定したり、相対位置指定したりしています。
ポイントは、ここでポジションを相対位置“position: relative;”に指定しておくことです。

■コメント付きコード

.typing {
    font-family: "Fira Mono", monospace; /* フォントを指定 */
    display: inline-block; /* インラインブロックを指定 */
    position: relative;　/* 相対位置を指定 */
    line-height: 1; /* 行の高さを指定 */
}

.typing {

font-family: "Fira Mono", monospace; /* フォントを指定 */

display: inline-block; /* インラインブロックを指定 */

position: relative;　/* 相対位置を指定 */

line-height: 1; /* 行の高さを指定 */

}

次のセレクタ。
これは疑似要素というものですね。
.typing:afterは、typingというクラスの後に要素を挿入したい場合に使用する事が出来ます。

補足情報
・classの前に疑似要素を作りたい場合は、.typing:beforといった書き方になります。
・CSSのバージョンが3だとbefor、afterの前についているコロン”:”が2個になります。

というわけで適用されているスタイルを確認します。

.typing:after {
    content: ""; /* 内容なし */
    position: absolute; /* 絶対位置を指定 */
    top:-1px;right:0;bottom:-2px;left:0; /* サイズ調整 */
    border-left: 1px solid #fff; /* 枠線左端のみ */
    background-color: #6C757D; /* 背景色 */
    animation: typinganimation 3s steps(17) infinite alternate; /* アニメーション情報 */
}

.typing:after {

content: ""; /* 内容なし */

position: absolute; /* 絶対位置を指定 */

top:-1px;right:0;bottom:-2px;left:0; /* サイズ調整 */

border-left: 1px solid #fff; /* 枠線左端のみ */

background-color: #6C757D; /* 背景色 */

animation: typinganimation 3s steps(17) infinite alternate; /* アニメーション情報 */

}

ここが今回の重要な部分になるので細かく解説していきます。

content: “”;

contentにはテキストや画像などの要素を入れる事が出来ます。
今回は何も入っていません。

position: absolute;

絶対位置を指定しています。
今回のclass=”typing”の要素であるspanを絶対位置として見ることで、本来後ろに付与される予定だったtyping:afterの要素がこの要素の起点である左上まで引き延ばされることになりました。
これによりHTMLで用意したテキストの上に重なる事になり、初期位置ではすべてのテキストが隠された状態になります。

top:-1px;right:0;bottom:-2px;left:0;

この部分は、テキストが重ねた疑似要素からはみ出してしまった場合に、疑似要素のサイズ調整をしている部分です。

border-left: 1px solid #fff;

重ねた疑似要素の左端のみボーダーで線を表示します。
これは入力カーソルを疑似的に表現しています。

background-color: #6C757D;

疑似要素の背景色を指定しています。
このカラーは全体の背景色と同じ色を指定しましょう。

animation: typinganimation 3s steps(17) infinite alternate;

アニメーションを指定するための情報が書かれています。
左から順に以下の情報がスペース区切りで書かれています。

アニメーション名(typinganimation)を指定します。
アニメーションにかかる時間(3s)を指定します。
アニメーションの切替段階(17段階)を指定します。
アニメーションの繰り返し設定(無限)を指定します。
アニメーションの繰り返し方法(偶数回は逆順)を指定します。

本来のアニメーションは滑らかに動くのですが、今回の様に段階的に動いてほしい場合はstepsを使用します。
また、alternateで繰り返しの偶数回目を逆順で変化させることで、タイピングで入力→バックスペースで削除　を繰り返す動作を表現しています。

次はアニメーションの動作部分になります。

@keyframes typinganimation {
    0% {
        left: 0; /* 左端の位置 */
        margin-right: auto; /* 右のmargin */
    }
    100% {
        left: 100%; /* 左端の位置 */
        margin-left: .5em; /* 左のmargin */
        margin-right: -.5em; /* 右のmargin */
    }
}

@keyframes typinganimation {

0% {

left: 0; /* 左端の位置 */

margin-right: auto; /* 右のmargin */

}

100% {

left: 100%; /* 左端の位置 */

margin-left: .5em; /* 左のmargin */

margin-right: -.5em; /* 右のmargin */

}

こちらがtypinganimationというアニメーション名に適用する設定になります。
ポイントはleftを０～100%へ変化させている事。
絶対位置指定しているので、0の時はclass=”typing”の要素の左端と疑似要素の左端が一致している状態にあっており、100%ではclass=”typing”の要素の右端に来た状態になります。

実装方法その２

こちらもコードと実行結果から紹介していきます。

参考サイトはこちら。

かちびと.net

CSSだけで任意のテキストにタイピングアニメーション

http://kachibito.net/css/typewriter-animation-pure-css

ResultSee the Pen Typewriter animation pure CSS by kachibito (@kachibito) on CodePen.タイプライターのようなエフェクトを任意のテキストに与えますcsshtm

HTML

<div class="bg-secondary">
   <p class="typing1 typinganime">Typing Animation</p>
</div>

<p class="typing1 typinganime">Typing Animation</p>

</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

.typing1{
    position: relative;
    top: 50%;  
    width: 8.8em;
    margin: 0 auto;
    border-right: 2px solid rgba(255,255,255,.75);
    font-family: 'Anonymous Pro', monospace;  
    font-size: 180%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;

}

.typinganime{
  animation: typinganimation 2s steps(16) 1s 1 normal both,
             inputcursor 0.5s steps(16) infinite normal;
}

@keyframes typinganimation{
  from{
      width: 0;
    }
  to{
      width: 8.8em;
    }
}

@keyframes inputcursor{
  from{
      border-right-color: rgba(255,255,255,.75);
    }
  to{
      border-right-color: transparent;
    }
}

@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

.typing1{

position: relative;

top: 50%;

width: 8.8em;

margin: 0 auto;

border-right: 2px solid rgba(255,255,255,.75);

font-family: 'Anonymous Pro', monospace;

font-size: 180%;

text-align: center;

white-space: nowrap;

overflow: hidden;

}

.typinganime{

animation: typinganimation 2s steps(16) 1s 1 normal both,

inputcursor 0.5s steps(16) infinite normal;

}

@keyframes typinganimation{

from{

width: 0;

}

to{

width: 8.8em;

}

@keyframes inputcursor{

from{

border-right-color: rgba(255,255,255,.75);

}

to{

border-right-color: transparent;

}

実行結果はこんな感じです。

その２の解説

それでは解説していきます。

HTML編２

HTMLに関しては今回も重要なのは1行のみです。

<p class=”typing1 typinganime”>Typing Animation</p>

1つ目との違いは、スタイル指定とアニメーションでclassを2つに分けている事です。
classを分けることで、解りやすく管理する事が出来ます。

CSS編２

それではCSSの解説をしていきます。

先ずは要素にスタイルをあてているclassから。

.typing1{
    position: relative; /* 相対位置を指定 */
    top: 50%;   /* 要素の高さ50%に表示(縦の中央揃え) */
    width: 8.8em; /* 要素の横幅 */
    margin: 0 auto; /* マージン上下は0、左右はautoを指定 */
    border-right: 2px solid rgba(255,255,255,.75); /* 枠線右側のみ表示 */
    font-family: 'Anonymous Pro', monospace;   /* フォント指定 */
    font-size: 180%; /* フォントサイズ指定 */
    text-align: center; /* 横の中央揃え */
    white-space: nowrap; /* ホワイトスペースの表示方法指定 */
    overflow: hidden; /* はみ出し部分を非表示 */
}

.typing1{

position: relative; /* 相対位置を指定 */

top: 50%; /* 要素の高さ50%に表示(縦の中央揃え) */

width: 8.8em; /* 要素の横幅 */

margin: 0 auto; /* マージン上下は0、左右はautoを指定 */

border-right: 2px solid rgba(255,255,255,.75); /* 枠線右側のみ表示 */

font-family: 'Anonymous Pro', monospace; /* フォント指定 */

font-size: 180%; /* フォントサイズ指定 */

text-align: center; /* 横の中央揃え */

white-space: nowrap; /* ホワイトスペースの表示方法指定 */

overflow: hidden; /* はみ出し部分を非表示 */

}

基本的にスタイルを指定しているだけなので、詳細についてはコメントで補完します。
ここで解説しておかなければいけないのはborder-rightの部分です。
今回はこれが入力カーソルの役割を果たしています。

あと見慣れない単語は、ホワイトスペースですかね。
ホワイトスペースとは、連続したスペースやタブ、改行の事を言います。
nowrapを指定した場合、ホワイトスペースを無視、改行は半角スペース表示、自動改行しないという設定になります。

次にアニメーション部分です。
ここでは2つのアニメーションを同時に設定しています。

.typinganime{
  animation: typinganimation 2s steps(16) 1s 1 normal both, /* タイピング部分 */
             inputcursor 0.5s steps(16) infinite normal; /* 入力カーソル部分 */
}

.typinganime{

animation: typinganimation 2s steps(16) 1s 1 normal both, /* タイピング部分 */

inputcursor 0.5s steps(16) infinite normal; /* 入力カーソル部分 */

}

この2つです。
その１と同様に動作情報を設定します。
ここで指定しているstepsは、テキストの文字数を目安にすると綺麗に表示されます。

次に、それぞれのアニメーション設定を見てみましょう。

@keyframes typinganimation{
  from{
      width: 0;
    }
  to{
      width: 8.8em;
    }
}

@keyframes typinganimation{

from{

width: 0;

}

to{

width: 8.8em;

}

こちらはタイピングアニメーションの方です。
fromは開始、toは終了を表しています。
widthで横幅を0から8.8emまで変化させる指定になっています。

次は入力カーソルのエフェクト部分のアニメーションです。
カーソルを点滅させています。

@keyframes inputcursor{
  from{
      border-right-color: rgba(255,255,255,.75);　/* 枠線右端の色指定 */
    }
  to{
      border-right-color: transparent; /* 枠線右端を透明化 */
    }
}