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

以下の記事の続きです
yako3.hatenablog.com

右上からババッて出てくる、左右交互にニュニュニュッて出てくるアニメーションを作っていきます
HTMLは前回の記事と同じなので省略します

右上からババッて出てくるアニメーション

.motion-type-2 div { transform-origin: right top; transform: rotate(90deg);}
.motion-type-2 div:nth-child(1){ background-color: #F19076; }
.motion-type-2 div:nth-child(2){ background-color: #DAD752; }
.motion-type-2 div:nth-child(3){ background-color: #B4D5C8; }

transform-origin: right top;
要素の変形transformにおける原点を設定します
right top なので、原点を右上とします

transform: rotate(90deg);
図形を90度回転させます

keyframesを書いていく

@keyframes rotate {
    from { transform: rotate(90deg); }
    to { transform: rotate(0deg); }
}

アニメーション名を rotate とし
右上から下に降りてくるアニメーションなので、fromを90deg, toを0degにします

animationを書いていく

.motion-type-2 div:nth-child(1) { animation: rotate 0.5s ease 1.5s forwards; }
.motion-type-2 div:nth-child(2) { animation: rotate 0.5s ease 1.7s forwards; }
.motion-type-2 div:nth-child(3) { animation: rotate 0.5s ease 1.9s forwards; }

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

左右交互にニュニュニュッて出てくるアニメーション

.motion-type-3 div:nth-child(2n-1){
    transform-origin: bottom right;
    transform: translateY(-100%) rotate(30deg);
}
.motion-type-3 div:nth-child(2n){
    transform-origin: bottom left;
    transform: translateY(-100%) rotate(-30deg); 
}
.motion-type-3 div:nth-child(1){ background-color: #F19076; }
.motion-type-3 div:nth-child(2){ background-color: #DAD752; }
.motion-type-3 div:nth-child(3){ background-color: #B4D5C8; }

.motion-type-3 div:nth-child(2n-1){}
.motion-type-3 div:nth-child(2n){}
左右交互に上から出てくるアニメーションなので、1,3番目の図形と2番目の図形を分けます

transform-origin: bottom right;
transform-origin で原点を設定するので、原点は右下になる

transform: translateY(-100%) rotate(30deg);
transform は与えられた要素を回転、拡大縮小、傾斜、移動することができるので
Y軸に図形1つ分上に平行移動し、右に30度回転させる

.motion-type-3 のtop/left, width/heightを以下のように調整して図形の位置確認すると

    top: 200px; left: 200px; width: 50%; height: 50%;

以下の画像のように、点線のところがmotion-type-1~3のアニメーションが表示され、motion-type-3の図形は順番が来るまで上の方に隠れている

keyframesを書いていく

@keyframes fall-1 {
    from { transform: translateY(-100%) rotate(30deg); }
    to { transform: translateY(0%) rotate(0deg); }
}
@keyframes fall-2 {
    from { transform: translateY(-100%) rotate(-30deg); }
    to { transform: translateY(0%) rotate(0deg); }
}

3番目の画像の場合、translateY(-100%) の位置から30度傾いた形からスタートし
translateY(0%) に移動しならが、0度で終了

animationを書いていく

.motion-type-3 div:nth-child(1) { animation: fall-1 0.6s ease 2.4s forwards; }
.motion-type-3 div:nth-child(2) { animation: fall-2 0.6s ease 2.6s forwards; }
.motion-type-3 div:nth-child(3) { animation: fall-1 0.6s ease 2.8s forwards; }

アニメーション時間を0.6s、開始時間を2.4sにする

これで完成