CSS Animation（ミッフィー編）

Hisami KuritaさんのCSSアニメーションがかっこいいので、斜めに画面が閉じるアニメーションを実装してみました。

See the Pen
Screen Transition by Hisami Kurita (@hisamikurita)
on CodePen.

斜めに画面が閉じるアニメーション

See the Pen
斜めズーム by やこ (@_may_six)
on CodePen.

斜めに傾けた長方形を複数用意し上から下に、下から上に移動させるアニメーションです。
少し上下の境目が見えるのが気になる。

下から上に移動する長方形

html, body {
    margin: 0;
    padding: 0;
}

#stage {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: white;
}

overflow: hidden;
画面からはみ出ている長方形を非表示にしている。

.motion-type-1 div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(120%) skewY(-5deg);
}

translateY(120%)
y軸上に画面１つ分（親要素分）下に移動し

skewY(-5deg)
-5deg y軸上に傾ける

上から下に移動する長方形

.motion-type-1 と同じく

.motion-type-2 div {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(-120%) skewY(-5deg);
}

ここで疑問なのが
translateY(100%) とすると図形はY軸の長さ分下にさがる
translateY(-100%) とすると図形はY軸の長さ分上にあがる

ぱっとみて100%だと上がるイメージが私はあるので、なぜ100%が下がるのかというと

https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translateより

上記の図のように(0, 0)の位置を取っているから。
translateY(100%) とすると、上記の図の座標では(0, 100)となるので下にさがる
translateY(-100%) とすると、上記の図の座標では(0, -100)となるので上にあがることになります。

アニメーション

8個のdivタグにアニメーションをつけていきます。

.motion-type-1 div:nth-child(1) {
animation: slide-down 1.5s ease 0.3s forwards;
background: #ff4500;
}
.motion-type-1 div:nth-child(2) {
animation: slide-down 1.5s ease 0.6s forwards;
background: #ffd700;
}
.motion-type-1 div:nth-child(3) {
animation: slide-down 1.5s ease 0.9s forwards;
background: #008000;
}
.motion-type-1 div:nth-child(4) {
animation: slide-down 1.5s ease 1.2s forwards;
background: #4169e1;
}

.motion-type-2 div:nth-child(1) {
animation: slide-rise 1.5s ease 0.3s forwards;
background: #ff4500;
}
.motion-type-2 div:nth-child(2) {
animation: slide-rise 1.5s ease 0.6s forwards;
background: #ffd700;
}
.motion-type-2 div:nth-child(3) {
animation: slide-rise 1.5s ease 0.9s forwards;
background: #008000;
}
.motion-type-2 div:nth-child(4) {
animation: slide-rise 1.5s ease 1.2s forwards;
background: #4169e1;
}

キーフレーム

@keyframes slide-rise {
    from { transform: translateY(-100%) skewY(-5deg); }
    to   { transform: translateY(-50%) skewY(-5deg); }
}

@keyframes slide-down {
    from { transform: translateY(100%) skewY(-5deg); }
    to   { transform: translateY(50%) skewY(-5deg); }
}

上から下に図形が落ちてくる場合
アニメーションが始まる時の図形の初期位置をtranslateY(-100%)、傾きをskewY(-5deg)
終わる位置をtranslateY(-50%)、傾きをskewY(-5deg)にする。
下から上に落ちてくる場合（keyframes slide-down）も同じような要領で設定する。

図形が迫ってくるアニメーション

See the Pen
強弱のズーム by やこ (@_may_six)
on CodePen.

円がびよよ〜〜んと近づいてくるアニメーションを作っていきます。

.circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #eaa;

	/*中央揃え*/
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;

	transform: scale(0); 
	animation-name: zoom;
	animation-duration: 3s;　/*アニメーション時間 */
	animation-timing-function: ease;
	animation-delay: 0.3s;
	animation-fill-mode: forwards;
}

transform: scale(0);
最初の円を非表示にさせておく。

一度円が出てきて、少し小さくなってまた画面を覆うような動きを

animation-timing-function: cubic-bezier()

で表現しようとし、以下のサイトでアニメーションの周期を設定しようとしました。
cubic-bezier.com
が上手くいかず。

cubic-bezier()を使うのではなく、キーフレームで以下のように設定するとやりたいことができました。

@keyframes zoom {
    0% { transform: scale(0); }
    20% { transform: scale(4); }
    50% { transform: scale(2); }
    100% { transform: scale(50); }
}

アニメーションの開始時は非表示
20%のところで実際の大きさ（50px, 50px）より4倍の大きさにし、50%のところで少し小さくする。
最後にむけて実際の大きさの50倍にし画面全体を覆うことができた。
これでびよよ〜〜んとした表現をすることができた。

文字がボヤ〜っと表示されるアニメーション

See the Pen
文字がボヤ〜っと出てくる by やこ (@_may_six)
on CodePen.

.text {
    position: absolute;
    width: 480px; height: 150px;
    transform: scale(0);
    font-family: 'Lobster';
    font-size: 90px;
    color: #f9783b;

    /* 要素の上下中央揃え */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    /*文字の上下中央揃え*/
    display: flex;
    justify-content: center;
    align-items: center;

    /* animation */
    animation-name: text-out;
    animation-duration: 3s;　/*アニメーション時間 */
    animation-timing-function: ease;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}

transform: scale(0);
初めは文字を非表示にする。

animation-name: text-out;
アニメーション名

animation-duration: 3s;
アニメーション時間の設定。

animation-delay: 0.2s;
アニメーション開始時間の設定。

animation-fill-mode: forwards;
CSSアニメーションの実行の前後にどのような対処をスタイルに適用するかを設定します。
forwardsの場合、対象は実行最後のキーフレームで設定された計算値を保持します。
なのでアニメーション終了後は以下のような状態が保持されます。

opacity: 1;
-webkit-transform: scale(1);

キーフレーム

ボヤ〜っと文字が出てくるように設定します。

@keyframes text-out {
	0% {
		opacity: 0;
		-webkit-transform: scale(1.3);
	}
	50% {
		opacity: 0.6;
		-webkit-transform: scale(1);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}

これら３つを合わせると少しいい感じのアニメーションになります。
以下のリポジトリのmiffyにコードが入ってます。
なぜmiffyかというと色が似てるからです🐰
github.com