CSS Animation #2 をやってみた (1)

前回に引き続きpart2をやってみたので復習
www.youtube.com

まずは画面いっぱいに色がブワッ！ってなるやつを作ります

中央から外へ色が広がるようにする

HTMLはこんな感じ

<main id="stage">
    <div class="motion-type-1">
        <div></div><div></div><div></div>
    </div>
    <div class="motion-type-2">
        <div></div><div></div><div></div>
    </div>
    <div class="motion-type-3">
        <div></div><div></div><div></div>
    </div>
</main>

CSSの#stageのところは省略

.motion-type-1,
.motion-type-1 div,
.motion-type-2,
.motion-type-2 div,
.motion-type-3,
.motion-type-3 div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

それぞれの色のサイズと位置を設定します

.motion-type-1 div { transform: scale(0); } /*これで大きさが0になり見えなくなる*/
.motion-type-1 div:nth-child(1){ background-color: #F19076;}
.motion-type-1 div:nth-child(2){ background-color: #DAD752;}
.motion-type-1 div:nth-child(3){ background-color: #B4D5C8;}

transform: scale(0);
transformは要素を拡大・縮小したりするので、scale(0)とすることで図形が0倍になる

keyframesを書いていく

@keyframes scale {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

アニメーション名を scale とする

to { transform: scale(1); }
scale(1)とすることで、等倍の図形がアニメーション終了後に表示される

animationを書いていく

.motion-type-1 div:nth-child(1) { animation: scale 0.8s ease 0.5s forwards; }
.motion-type-1 div:nth-child(2) { animation: scale 0.8s ease 0.6s forwards; }
.motion-type-1 div:nth-child(3) { animation: scale 0.8s ease 0.7s forwards; }

アニメーションの時間を0.8s、開始時間を0.5sとし、0.1s刻みでアニメーションしていく

animationの記述例

セレクタ名 {
    animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}

これで画面いっぱいに3色がブワッ！ってなるアニメーションが作れた

次の記事では左からババッと出てくるアニメーションと、左右交互にニュニュニュッて出てくるアニメーションを作っていく