【CSS アニメーション】要素をスライドインで表示させる方法

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

Webサイトのファーストビューの要素をスライドインで表示させる方法が知りたい
CSSアニメーションのみでスライドインを実装できるようになりたい
コピペでOKなCSSアニメーションのスライドイン実装方法が知りたい
CSSアニメーションで作るスライドインのデモが見たい

という方のお悩みを解決します！

CSSアニメーションで作るスライドインのデモ
スライドインのサンプルコード
まとめ

CSSアニメーションで作るスライドインのデモ

まずは実際に動作しているデモ（テキストが右から左へスライドインで現れる）をご覧になっていただきましょう。

＊デモ用なのでアニメーションの繰り返し回数は無限ループにしております。

See the Pen
rNVgqmx by 石森裕也 (@yuyaphotograph)
on CodePen.

スライドインのサンプルコード

上記で紹介したデモのHTML・CSSのコードをそれぞれ見てみましょう。

HTMLは以下。
記事タイトルをスライドインで表示させるのを想定しているのでh1タグでコーディングしています。

HTML

<h1 class="Headline">記事タイトル</h1>

h1タグにつけたクラス .Headlineに対してCSSで「アニメーションの指定」。
指定する「CSSアニメーションの作成」を記述します。

右から左へスライドイン

/* CSSアニメーションの指定 */
.Headline{
  animation: SlideIn 1.6s;
}

/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

transform: translateX()の引数を負の値に変更したり、Xの代わりにtranslateY()を使用することで異なるアニメーションを簡単に実装できるのでそのコードも以下で紹介します。

左から右へスライドインするアニメーション

左から右へスライドイン

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

上から下へスライドインするアニメーション

上から下へスライドイン

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

下から上へスライドインするアニメーション

下から上へスライドイン

@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateY(64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

まとめ

今回の記事で紹介したtransform:translateX() or Y()を使ったCSSアニメーションを実践すれば誰でも簡単にさりげなくオシャレなエフェクトをかけることができますね！

「アニメーションについてもっとインプットしてスキルアップしたい！」

という方は以下の記事でまとめて紹介しているので、目を通してみてくださいまし〜

【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ