背景色を左から右へスライドして表示させるCSS設定
はじめに
WEBサイト閲覧時「背景が左（あるいは右）から右へ広がっていく」動きがよくあります。
アレを実装したかったのですが、いざやってみようとするとどうやるのか悩みましたので、今後の備忘録として記録しておきます。
仕上がりイメージ
こんな感じで背景が広がっていきます。
目次
疑似要素でdiv全体を囲む
ざっくりと方法を説明すると「ボックスを作って、その疑似要素で全体をbackgroundで色を付ける」「それをアニメーションで動かす」という流れになります。
ですので、まずは枠全体を疑似要素で覆います。
HTML
<div class="test_box"> <p>テキスト</p> </div>
CSS
.test_box {
position: relative;
width: 100%;
height: 300px;
}
.test_box:after {
position: absolute;
content: '';
top:0;
left: 0;
background: #338DC9;
width: 100%;
height: 100%;
z-index: -1;
}
できあがったもの
テキスト
divでボックスを作り、その疑似要素:afterで縦横100%を指定した上でbackgroundを設定します。
疑似要素はテキスト等の上の階層に配置されるのでそれを回避するためにz-indexでテキストより下の層に配置されるよう調整して下さい。
この状態ではまだ「色が塗られた背景」のままですので、次のステップで背景の疑似要素の位置・表示を調整します。
疑似要素の初期表示位置を調整する
疑似要素の初期を表示させないために、CSSに以下を追記します。
HTMLは共通のため割愛します。
CSS
.test_box {
position: relative;
width: 100%;
height: 300px;
overflow: hidden; // ここを追記
}
.test_box:after {
position: absolute;
content: '';
top:0;
left: 0;
background: #338DC9;
width: 100%;
height: 100%;
z-index: -1;
transform: translateX(-100%); // ここを追記
}
まずは疑似要素にtransform: translateX(-100%);を追記して疑似要素（背景色）を左方向へ100%移動させ、背景が枠内に表示されないようにします。
あわせて親要素.test_boxにoverflow: hidden;を追記します。これを追記しないと、左方向へ移動した疑似要素が枠の外で表示されてしまいます。
できあがったもの
テキスト
見た目では分かりませんが、枠外（左側）に疑似要素が移動されました。
次にこの疑似要素を右へスライドさせるアニメーションを追記させます。
@keyframesでアニメーションを調整する
疑似要素をアニメーションさせるための追記をします。
HTMLは共通のため割愛します。
CSS（追記のみ）
.test_box:after {
//前回の続きから以下を追記
animation-name: test_box_slide;
animation-duration:.5s;
animation-fill-mode: forwards;
transform: translateX(-100%);
}
@keyframes test_box_slide {
0% {
transform: translate(-100%,0)
}
100% {
transform: translate(0,0)
}
animationプロパティを使って疑似要素のアニメーションの速さ等を制御します。
また、@keyframeで動画の始点（0%）から終点（100%）までの動き方を決めます。
できあがったもの
上記のままの表記だとページ読込と同時にアニメーションが開始されてしまうので、Javascriptでアニメーションの開始を制御しています。
下のボタンをクリックして下さい。
テキスト
ひとまずはこれで完成ですが、個人的に気になるのでanimationプロパティについて調べてみました。
animationプロパティについて
animationプロパティに関連するものには以下があります。
animationプロパティ
| プロパティ | 概要 |
|---|---|
| animation-name | @keyframeで使用する名前の設定 初期値：なし |
| animation-duration | アニメーションの開始から終了するまでの時間（秒） 例：1s |
| animation-timing-function | アニメーションの途中の動きの制御 ※詳しくは後述します 初期値：ease ease linear ease-in ease-out ease-in-out cubic-bezier |
| animation-delay | アニメーションの開始を遅らせる時間（秒） 初期値：0 例：1s |
| animation-iteration-count | アニメーションを繰り返し再生する回数 初期値：1 infinite（無限） |
| animation-direction | アニメーションの再生方向 初期値：normal（順方向） reverse（逆方向） alternate（順→逆） alternate-reverse（逆→順） |
| animation-fill-mode | アニメーション終了時の動き none（元のスタイル） backwards（0%時のスタイル） forwards（100%時のスタイル） both（100% 再生前は0%） |
| animation-play-state | （対象のオンマウス時に） アニメーションを再生中にするか一時停止にするか running（再生中） paused（一時停止） |
animation-nameでキーフレームの名前を作り、@keyframeで0～100%のアニメーションの変化を調整する流れになります。
その他、アニメーションを開始するタイミングや時間などを調整します。
animation-timing-functionプロパティにいついて
animation-timing-functionプロパティは「アニメーションの途中の動きの制御」と記載しましたが、例えば「開始時のスピードのみ早く」等の設定ができます。
それぞれの値の内容は以下のとおりです。
プロパティの値
| 値 | 概要 |
|---|---|
| ease | ゆっくり～速く～ゆっくり |
| linear | 同じ速さ |
| ease-in | ゆっくり～速く |
| ease-out | 速く～ゆっくり |
| ease-in-out | ゆっくり～速く～ゆっくり |
| steps(a,b) | a = 段階（アニメーションを何分割するか） b = “start（1段階目からスタート）”or”end（0段階目からスタート）” |
| step-start | 最初の段階で終了位置まで進む |
| step-end | 最後の段階で終了位置まで進む |
こう書いておいてよく分からないので、それぞれの動きを実際にCSS記述してみました。
できあがったもの
Javascriptでアニメーションの開始を制御しています。
下のボタンをクリックして下さい。
上記以外にcubic-bezier(a,b,c,d)もあります。a,b,c,dにはそれぞれ数値を入れ、アニメーションの速度を細かく調整することができます。
また、animationプロパティもあります。
これは順にnamedurationtiming-functiondelayiteration-countdirectionfill-modeplay-stateを制御するショートハンドになります。
