【CSS】マウスオーバーで上下に重なる要素が入れ替わるアニメーション

こんにちは、Ryohei（@ityryohei）です！

CSSで、マウスオーバーした際に上下に重なる要素が入れ替わるアニメーションのご紹介です。

予め二つの要素を重ねた状態で設置しておき、マウスオーバー時に上と下の要素が入れ替わるアニメーションとなります。文字だけでは伝わりにくいかと思いますので、簡単なデモを用意しました。下記のデモにて表示されている「FRONT」と記載された要素にマウスカーソルを乗せてみてください。

See the Pen
EzzvEG by ryoy (@intotheprogram)
on CodePen.

「FRONT」と記載された要素が下（裏）側に移動して「BACK」と記載された要素が上（表）側に表示されたかと思います。これが上下に重なる要素が入れ替わるアニメーションになります。

本記事では、上記アニメーションの実装方法をご紹介していきたいと思います。

では、解説していきます。

HTMLで上下に重なる要素を作成する

HTMLで上下に重なる要素を作成します。

本記事では「box」という要素の配下に「front」と「back」という形で二つの要素を持たせています。命名は十人十色ですので、ご自分の好きな名前で記述していただければと思います。

HTML

<a class="box" href="#">
  <span class="back">BACK</span>
  <span class="front">FRONT</span>
</a>

「box」の配下に「front」と「back」を作成しました。以上でHTMLの準備は完了です。

続いて作成したHTMLにCSSでスタイルを定義していきます。

通常時とマウスオーバーした際のスタイルを定義する

HTMLで作成した要素にCSSでスタイルを付けていきます。スタイルを付ける際に下記の点に気を付けていただければと思います。

• 通常時とhover時の「z-index」は適切に設定する
• 「FRONT」と「BACK」の要素には背景を付ける

各要素の「z-index」と背景が設定されていない場合に要素が入れ替わらないことがありますのでご注意ください。

下記にCSSのサンプルを用意しましたので、参考にしてスタイルを定義していただければと思います。

CSS

/* 「box」スタイル */
.box {
  position: relative;
  display: block;
  width: 300px;
  height: 100px;
  margin: 40px auto 0;
}

/* 「FRONT」、「BACK」の共通スタイル */
.box span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 290px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  transition: .3s;
}

/* 「BACK」スタイル */
.box .back {
  background: #007db9;
  z-index: 1;
}

/* 「FRONT」スタイル */
.box .front {
  color: #fff;
  background: #2f3640;
  transform: translate3d(10px, 10px, 0);
  z-index: 2;
}

/* 「BACK」スタイル（hover） */
.box:hover .back {
  transform: translate3d(10px, 10px, 0);
  z-index: 2;
}

/* 「FRONT」スタイル（hover） */
.box:hover .front {
  transform: translate3d(0, 0, 0);
  z-index: 1;
}

本記事でご紹介したHTMLにCSSでスタイルを定義すると下記デモのアニメーション完成です。（冒頭でご紹介したデモと同じものです。）

DEMO

See the Pen
EzzvEG by ryoy (@intotheprogram)
on CodePen.

補足としまして、要素の縦・横の位置はtransformで設定していますが、positionを使ってtop、leftで設定していただいても問題ありませんので、使いやすい方で実装ください。私個人としましては、transformの方が動きが滑らかなのでおすすめです。

最後に

いかがでしたでしょうか。

本記事ではボタンに似た要素を使用して上下に重なる要素を入れ替えるアニメーションをご紹介しましたが、パネルであったりバナーであったり、見せ方によって視覚的な効果が大きく変わってくるかと思いますので、カスタマイズしてお好みのアニメーションにしていただければ幸いです。

以上、CSSでマウスオーバーした際に上下に重なる要素が入れ替わるアニメーションのご紹介でした。