CSS3で文字やメッセージをふわっと表示させるアニメーションを実装する

Webサイトにアクセスしたとき、メインビジュアルでダイナミックに写真や動画を使ってインパクトを与えることができますが、そこに文字やメッセージなどをなんらかのアニメーションで表示させることもまたユーザーの目を引くポイントになります。

Webサイトにアニメーションを加える方法は沢山ありますが、ここではCSS3を使ったアニメーションをご紹介します。
CSSだけでアニメーションを実装できるっていいですよね。

サンプルとして文字をふわっと表示させるアニメーションを実装してみます。

例えば、画面全体の要素で文字を中央寄せで表示させてみます。

HTML

<section id="anime-warp">
  <div id="appear-block">
    <p class="appear dh">TEXT</p>
    <p class="appear d1h">ANIMATION</p>
  </div>
</section>

各要素にはCSSでスタイルを当てるためにidやclassを付けています。
anime-warpやappear-blockではレイアウトのコントロールを。appearやdh、d1hでは表示に関するコントロールをCSSで行っていきます。

CSS3で動きをコントロール

CSS3のanimationプロパティや@keyframesを使って表示のコントロールをしていきます。

意外とシンプルに実装することができます。

CSS

#anime-warp {
  background: #e6e6e6;
  height: 100vh;
}

#appear-block {
  position: absolute;
  bottom: 14%;
  width: 100%;
  text-align: center;
}

.appear {
  transform-origin: center top;
  animation: show 1s both;
}

p.appear {
  font-size: 5.6vw;
}

p.appear:last-child {
  margin: 0;
}

.dh { animation-delay: .5s; }
.d1 { animation-delay: 1s; }
.d1h { animation-delay: 1.5s; }
.d2 { animation-delay: 2s; }

@keyframes show {
  0% {
    transform: translate(0,50px);
    opacity: 0;
  }
  100% {
    transform: translate(0,0);
    opacity: 1;
  }
}

idのanime-warpやappear-blockはレイアウトなどの調整になります。
表示させるテキストの要素に付けたクラス「appear」に対して、transform-originでテキストのポジションを整えておきます。
その後にanimationでshowをセットします。1秒間でアニメーション「show」を実行します。
animationプロパティのbothはanimation-fill-modeの設定で、実行前と実行後で0%と100%の状態を維持しておく指定になります。これを指定していないとデフォルトがnoneになるのでリロードしてみると一度実行して表示された文字が出た状態のまま実行されてしまいます。

showのアニメーションは@keyframesで定義しています。
0%から100%で、はじめは50px下のポジションに位置し、opacityを0にして非表示の状態に。
そこから1秒間でopacityを1までもっていき徐々に表示させ、上下のポジションを0に戻して上に上がるアニメーションを実装しています。

dh、d1、d1h、d2では、animation-delayでアニメーションの実装を遅延させています。
ある程度の秒間隔だけ用意しておいて、必要な秒数を使ってデザインの中で表示のタイミングを取っていくと良いかもしれません。

以下、サンプルの実装の動きになります。
動画（3分半ほど）