CSSで文字にアニメーションをつける

CSSを用いて、文字をアニメーションさせる方法を見ていきます。「@keyframes」と「animation」を使って文字をフェードさせたりする簡単なアニメーションを実装していきます。

フェードアニメーションの作り方

まずは、「@keyframes」を使ってどのタイミングで何をどう変化させるかを指定していきます。

@keyframes fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0);
    opacity: 0;
  }
  65% {
    transform: scale(4.5);
    opacity: 0;
  }
  80% {
    transform: scale(0.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

transformプロパティのscale()関数を使って文字を拡大・縮小させ、opacityプロパティで不透明度を変えてフェードしているように見せます。次にアニメーションの設定をします。

p {
  animation-name: fade;
  animation-duration: 3s;
  text-shadow: 1px 2px 15px rgba(0,0,0,0.6);
}

「animation-name」でキーフレーム名の「fade」を指定して、「animation-duration」でアニメーションの時間を指定しています。ここでは3秒かけてアニメーションするようにしています。

DEMO

タイピングアニメーションの作り方

先程と同じように、「@keyframes」を使ってどのタイミングで何をどう変化させるかを指定していきます。

@keyframes typing {
  0% {
    width: 0;
  }
  100% { 
    width:15em;
  }
}

@keyframes cursor {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: #000;
  }
  100% {
    border-color: transparent;
  }
}

最初のキーフレームで「typing」という名前をつけて0～15emの幅でアニメーションさせるように設定をしています。次のキーフレームで「cursor」という名前をつけてアニメーションの半分（50％）でボーダーを表示させる設定をしています。これで、点滅しているようなアニメーションになります。

続いて、アニメーション部分の指定をしていきます。

p {
  width: 15em;
  border-right: 0.1em solid #000;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 12s steps(15, end), cursor 0.8s step-end infinite;
}

まず「typing」キーフレームの部分ですが、steps()関数を使って15段階で右に連続してアニメーションを発生させています。「end」という値で右連続、「start」という値で左連続になります。これを12秒かけてアニメーションさせています。
そして、「cursor」キーフレームで「step-end」を使ってアニメーション終了時に最終の状態にして、「infinite」で無限に繰り返す設定にしています。