CSSで2つの要素をふわっとアニメーション切り替えする

2つの要素をふわっとフェードアウトしながら切り替えたいケースがまれによくあると思いますが、そんな時はCSSでアニメーションして実装しちゃいましょう

シンプルに切り替える場合

ほとんどの場合はこれでいけると思います。

See the Pen animation1 by tkiha (@yeeururn-the-sans) on CodePen.

1枚目のCSSを抜粋するとこんな感じです

// 10秒アニメーションをずっと繰り返す。アニメーション名はanime1
animation: 10s infinite anime1

// アニメーション名:anime1 の動作
@keyframes anime1
  // 最初は普通に表示 
  0%
    opacity: 1
  // 2.5秒までは1枚目を表示 
  25%
    opacity: 1
  // 2.5秒〜5秒までアニメーションで消えていく
  50%
    opacity: 0
  // 5秒〜7.5秒まで透明
  75%
    opacity: 0
  // 7.5秒〜10秒までアニメーションで表示していく
  100%
    opacity: 1

2枚目はこんな感じですね。1枚目の逆みたいなイメージです

// 10秒アニメーションをずっと繰り返す。アニメーション名はanime2
animation: 10s infinite anime2

// アニメーション名:anime2 の動作
@keyframes anime2
  // 最初は透明にして非表示 
  0%
    opacity: 0
  // 2.5秒までは2枚目は透明 
  25%
    opacity: 0
  // 2.5秒〜5秒までアニメーションで表示
  50%
    opacity: 1
  // 5秒〜7.5秒まで2枚目を表示
  75%
    opacity: 1
  // 7.5秒〜10秒までアニメーションで消えていく
  100%
    opacity: 0

これらの2つの要素を、position: absolute;で重ねて表示しておくことで、ふわっと切り替えるように見えます

<div class="container">
  <div class="body1">1枚目</div> ← position: absolute;
  <div class="body2">2枚目</div> ← position: absolute;
</div>

リンクがある場合の問題点

上のパターンだと、aタグが乗っかっている場合に、aタグは非表示になっているだけなので、1枚目も2枚目も、どちらを表示していてもリンクがクリックできてしまいます。

See the Pen リンクがある場合の動作 by tkiha (@yeeururn-the-sans) on CodePen.

なので、非表示と同時にdisplay: noneを指定する必要があります。

@keyframes anime2
  // 最初は非表示にして、1枚目ではクリックできないようにする
  0%
    display: none
  // 2.5秒の前までは2枚目は非表示 
  24%
    display: none
  // 2.5秒から2枚目を透明に変える 
  25%
    display: block
    opacity: 0
  // 2.5秒〜5秒までアニメーションで表示
  50%
    opacity: 1
  // 5秒〜7.5秒まで2枚目を表示
  75%
    opacity: 1
  // 7.5秒〜10秒までアニメーションで消えていく
  100%
    opacity: 0

リンクがある場合でも、これで大丈夫

上記を適用するとこんな感じの動作になります。2枚目が消えている時はリンクがクリックできなくなっていると思います。

See the Pen アニメーションで二つの要素を切り替える（aタグが乗っかっている場合） by tkiha (@yeeururn-the-sans) on CodePen.