見出し画像

【コーディング】超分かりやすい！CSSスライダーアニメーション！！

meg

昨日はコーディングの授業がありました。

数値の設定が意味不明だった@keyframesアニメーションの設定について、とても分かりやすく教えていただき、まるでヘッダー画像のように暗雲から光差し込むような感覚を覚えました！！さすが先生！！！すごい。

忘れないうちに、noteにまとめておきたいと思います。

どんなコードを書いたか

HTML/CSSは以下の通り設定しました。
やりたいこととしては、1枚につき6秒ずつ合計5枚の画像を表示したい。6秒×5枚なので全ての画像が表示される合計の秒数は30秒間。それを永遠にリピートしたい。

※画像はCSSのbackground:url();ではなくHTMLのimgタグで入れています。親要素にposition:relative; 子要素の.backにposition:absolute;をかけていますがアニメーションに関係ないので省略しました。

コピペで記述したので、うまくいっていますが、何をどういじればどう変化が起きるのかイメージできず、アレンジできない(;_;)という状態でした。

【HTML】

<div class="back1 back"><img src="image/back2.jpg" alt=""></div>
<div class="back2 back"><img src="image/back2.jpg" alt=""></div>
<div class="back3 back"><img src="image/back3.jpg" alt=""></div>
<div class="back4 back"><img src="image/back4.jpg" alt=""></div>
<div class="back5 back"><img src="image/back5.jpg" alt=""></div>

divでimgをくくって、divにclass名としてback1〜5とbackをそれぞれ指定しています。

【CSS】

.back img {
   opacity: 0;
   animation: rotation 30s infinite;
}

.back1 img {
   animation-delay: 0;
}
.back2 img {
   animation-delay: 6s;
}
.back3 img {
   animation-delay: 12s;
}
.back4 img {
   animation-delay: 18s;
}
.back5 img {
   animation-delay: 24s;
}

@keyframes rotation {
   0% {
   opacity: 0;
   }

   7% {
   opacity: 1;
   }

   18% {
   opacity: 1;
   }

   25% {
   opacity: 0;
   }

   100% {
   opacity: 0;
   }
}

こんな感じです。私にはこのCSSで指定している％数値やopacityがなぜ中2つだけ１なのか、意味がわかりませんでした。。

よくわかる解説☆

平成教育委員会的な。笑
令和になっちゃったから時代錯誤感、、笑

まず、上から順番に解説したいと思います。

.back img {
   opacity: 0;
   animation: rotation 30s infinite;
}

①backのimgに対して
opacity: 0;　0%表示（0%不透明＝100%透明＝非表示）
animation: rotation 30s infinite;
（アニメーションの名前をrotationに指定して（@keyframesで使う）
　アニメーションの全体の秒数を30秒（30s）に指定
　infiniteで永遠にリピ設定）

.back1 img {
   animation-delay: 0;
}
.back2 img {
   animation-delay: 6s;
}
.back3 img {
   animation-delay: 12s;
}
.back4 img {
   animation-delay: 18s;
}
.back5 img {
   animation-delay: 24s;
}

②back1〜5に対してanimation-delayをそれぞれかけてあげる。
back1はすぐに開始。back2は6秒後に開始。back3は12秒後に開始・・・

@keyframes rotation {
   0% {
   opacity: 0;
   }

   7% {
   opacity: 1;
   }

   18% {
   opacity: 1;
   }

   25% {
   opacity: 0;
   }

   100% {
   opacity: 0;
   }
}

③0%・25%・100%では非表示に、7%・18%では表示されるように、opacityの数値を設定。

これ！！！！！！！！！！！！！
意味不明の数値ですよね。。
でも、解説していただいて理解できました！！！嬉


まず、考え方としては、

30秒間を100％として計算します。
※15秒経過した時点＝50％ですね。33%あたりが10秒時点かな。

フェードイン＆アウトさせるために6秒より少しゆとりをもった秒数設計をしてあげます。（この辺を何％で設定するかによって1枚目から2枚目に移り変わるふわっと感（？）が変わります）

上記の設定ではどんな設定にしているかというと

0%（開始時）のとき
opacity: 0;

7%（開始から2.1秒後（30秒×0.07））のとき
opacity: 1;　　→ふわっと表示させる

18%（開始から5.4秒後（30秒×0.18））のとき
opacity: 1;　　→表示させっぱなし

25%（開始から7.5秒後（30秒×0.25））のとき
opacity: 0;　　→だんだんフェードアウトさせる

100%（開始から30秒後）のとき
opacity: 0;　　→25%〜100%までは完全透明（非表示）

という感じです！！

図にして説明してみると

画像1

こんな感じです！！！

Webページを表示したと同時にback1がスタート！7%(2.1秒)までにopacity:1;(100％不透明＝見えている状態)になるようふわっと表示され、そのまま5.4秒までopacity:1;で表示され続け、その後フェードアウト。
そうしているうちにページを表示してから6秒後にback2がスタート！時間差でback2〜5がback1と同じ動きをします。

なぜ、時間差で同じ動きをするかというと、
①で、.back img （つまりback1〜5）に対してanimation: rotation 30s infinite;という同じ設定をしているから！

つまり、back1〜5の画像が6秒毎に順番にフェードインアウトを繰り返す設定のできあがり！！！！！

意味、分かりましたか？

あんまり綺麗な図と説明ではないかもしれませんが；

私の中ではめちゃくちゃスッキリ☆


上記の設定では、次の画像へうつるタイミングで一瞬画面が真っ白になり、5枚の画像がフェードインアウトする設定です。
（アニメーションを言葉で説明するの難しい；実装してみてくださいm(_ _)m）

もう少し画像のフェードインの時間を早めに、フェードアウトの時間を遅めに、たとえば7%→5%、18%→20%くらいにしてあげると、表示される時間（opacity:1;の時間）が長くなるので、真っ白の画面はほぼなしで画像が切り替わっていきます。

数値の理論を知っていると、画像の枚数が増えても、表示させる秒数が変動しても対応できますね♪


ただし、スライダーは基本的にJavaScriptで表示させるのが簡単？で一般的？らしいですヾ(✿❛◡❛)ノ

スクールには説明上手な先生がいて嬉しいです♡

はっとこ。笑


こんなにしっかりと解説作ったのは初めて・・・！

分かりやすかったよと思ったら、よろしければnoteにスキ♡や、Twitterにいいね♡押してくださいませm(_ _)m♡

この記事が気に入ったらサポートをしてみませんか？