CSS Animation をやってみた（2）

この記事の続きです
yako3.hatenablog.com

画像に対して左からバーが出てきて画像を覆い隠すアニメーションを作っていく

HTMLはこんな感じ

    <main id="slider">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <!-- 今回はここを新しく追加 -->
        <div class="paint">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!----------------------->
    </main>

CSSの説明をしていく

.paint {
    position: absolute;
    top: 0;
    left: 0;
    width : 100%; 
    height: 100%;
}

.paint div の親要素なので、横から表示されるバーが画像全部を覆って欲しいので、width : 100% とする

.paint div{
    background: #fff;
    width : 100%; 
    height: 25%;
    transform: translateX(-100%); /*与えられた要素を回転、拡大縮小、傾斜、移動することできる*/
}

transform: translateX(-100%);
与えられた要素を回転、拡大縮小、傾斜、移動することできる
transformは処理が早いらしい
translateX が -100% なのは、.paint div{} に背景色を追加するとわかりやすい
-100% とすることで、バーのスタートラインが画像幅左に1個ずれた位置になる

keyframesを書いていく

@keyframes slide-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
}

アニメーション名を slide-right とする

バーの開始時のアニメーションはx座標が-100%からスタートする
終了時はバーが画像の上に覆いかぶさってないといけないので0%

animationを書いていく

.paint div:nth-child(1) { animation: slide-right 0.5s ease 1.6s forwards;}
.paint div:nth-child(2) { animation: slide-right 0.5s ease 1.7s forwards;}
.paint div:nth-child(3) { animation: slide-right 0.5s ease 1.8s forwards;}
.paint div:nth-child(4) { animation: slide-right 0.5s ease 1.9s forwards;}

バーのアニメーションの時間を0.5s、開始時間を1.6sからにする

これで完成👍