どんなものが出来るのか

このgif画像を参考にしてください。

「あの動き」では困るので「カバーアニメーション」と命名します。正式名称があったら誰か教えてください。

基本の形の作り方

アニメーションは広く普及しているanime.jsで記述します。

環境

CSSリセットとしてress、アニメーションはanime.jsで記述していきます。

お使いの環境に合わせて適宜変更していってください。

コーディング

HTML

<div class="wrap">
    <div class="cover"></div>
    <p>ANIMATION</p>
</div>

CSS


.wrap {
    position: relative;
    padding: 8px;
}

.wrap > .cover {
    position: absolute;
    z-index: 1;

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #03a9f4;
}

.wrap > p {
    position: relative;
    z-index: 0;

    font-size: 24px;
    font-family: "Montserrat";
    letter-spacing: 2px;
    color: #1f1f1f;
}

JS

// 要素の取得
var wrap = document.getElementsByClassName("wrap")[0];
var cover = wrap.getElementsByClassName("cover")[0];
var text = wrap.getElementsByTagName("p")[0];

// アニメーション
var timeline = anime.timeline();
timeline
	.add({
		targets: cover,
		duration: 500,
		easing: "easeInExpo",
		begin: () => {
			cover.style.transformOrigin = "left";
			text.style.visibility = "hidden";
		},
		scaleX: [0, 1]
	})
	.add({
		targets: cover,
		duration: 500,
		easing: "easeOutExpo",
		begin: () => {
			cover.style.transformOrigin = "right";
			text.style.visibility = "visible";
		},
		scaleX: [1, 0]
	});

何をやっているか

アニメーション開始時点 (1回目のbegin関数)

文字側のvisibilityをhiddenに設定する。
CSSプロパティのtransform-originをleftに設定する。

カバーを拡大する (scaleX: [0, 1])

scaleXを0から1へアニメーションさせる。

カバーの拡大が完了 (2回目のbegin関数)

文字側のvisibilityをvisibleに設定する。
CSSプロパティのtransform-originをrightに設定する。

カバーを縮小する (scaleX: [1, 0])

scaleXを1から0へアニメーションさせる。

基本的にはやっている事はこれだけです。

コツ

イージングは拡大するときにはeaseIn*系、縮小するときにはeaseOut*系を使うと動きがスムーズに見えて見栄えが良くなります。

応用

その1

カバーを2個にします。

HTML

cover要素はp要素より前に置かないとCSS側のnth-type-of(n)で上手くいかないので注意してください。

<div class="wrap">
    <div class="cover"></div>
    <div class="cover"></div>
    <p>ANIMATION</p>
</div>

CSS

基本のCSSを少し改変します。

.wrap > .cover:nth-of-type(1) {
    background-color: #03a9f4;
    z-index: 2;
}

.wrap > .cover:nth-of-type(2) {
    background-color: #0277bd;
    z-index: 1;
}

JS

カバー毎にdurationとdelayを少しだけずらします。

// 要素の取得
var wrap = adv_1.getElementsByClassName("wrap")[0];
var cover1 = wrap.getElementsByClassName("cover")[0];
var cover2 = wrap.getElementsByClassName("cover")[1];
var text = wrap.getElementsByTagName("p")[0];

// アニメーション
var timeline = anime.timeline();
timeline
	.add({
		targets: [cover1, cover2],
		duration: (target, index) => 500 - index * 100,
		easing: "easeInExpo",
		begin: () => {
			cover1.style.transformOrigin = "left";
			cover2.style.transformOrigin = "left";
			text.style.visibility = "hidden";
		},
		scaleX: [0, 1]
	})
	.add({
		targets: [cover1, cover2],
		duration: 500,
		delay: (target, index) => index * 100,
		easing: "easeOutExpo",
		begin: () => {
			cover1.style.transformOrigin = "right";
			cover2.style.transformOrigin = "right";
			text.style.visibility = "visible";
		},
		scaleX: [1, 0]
	});

その2

応用その1を簡略化したものです。イージングを各要素ごとに違うものを適用しています。

HTML、CSSは応用1のものと同じです。

JS

timeline
	.add({
		targets: [cover1, cover2],
		duration: 500,
		easing: (target, index) => `easeIn${["Expo", "Cubic"][index]}`,
		scaleX: [0, 1],
		begin: () => {
			cover1.style.transformOrigin = "left";
			cover2.style.transformOrigin = "left";
			text.style.visibility = "hidden";
		}
	})
	.add({
		targets: [cover1, cover2],
		duration: 500,
		easing: (target, index) => `easeOut${["Expo", "Cubic"][index]}`,
		scaleX: [1, 0],
		begin: () => {
			cover1.style.transformOrigin = "right";
			cover2.style.transformOrigin = "right";
			text.style.visibility = "visible";
		}
	});

最後

間違ってたらコメント欄でご指摘ください。

ブラウザ上で動かす
 ソースコード