ワイプ効果で
要素を切替える表示部分をふき取るように
別の要素に差し替えるエフェクト

ワイプ効果とは、あまり一般的ではないようですが、画面の一部または全体を別のコンテンツで覆うように切り替えるアニメーションのことを指します。次はワイプで要素を表示させるエフェクトです。
ワイプ効果で要素を表示：https://labo.studio-happyvalley.com/wipe/

次はワイプ効果で画像を別の画像へ切り替えるエフェクト。
マウスオーバーで切り替わり、マウスを外すと戻ります。

前章でご覧頂いた画像切り替えワイプのアニメーションをバラバラの静止画にしてみました。
基本は、1.元画像と、2.切替用画像、3.ワイプエフェクトの三つの要素が必要になります。
それぞれを元画像をdiv要素で、2をbefore疑似要素、3をafter疑似要素で構築。
最初は元画像だけが表示。最後は元画像を2と3が隠してしまう。途中は自然なアニメーションを設定という構成です。
以下でわかりやすくバラバラの静止画にしてみました。
ワイプアニメーションを静止画で分解：https://labo.studio-happyvalley.com/wipe/base/

ワイプ効果部分のコードです。

HTMLのコード

<div class="contentBlock num1 land">
	<figure><img src="/assets/labo/wipe/images/middle/hill.jpg" alt=""></figure>
</div>

次はCSS

/* ワイプ効果を適用するブロック */
.contentBlock{
	flex: 0 0 60px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	position: relative;
	z-index: 0;
	margin-bottom: 22px;
	padding: 0px;
	height: 100%;
	color: #fff;
	background: #123456;
}
/* ブロックの縦型タイプと横型タイプ */
.land{
	max-width: 600px;
	height: min(100%, 400px);
	max-height: 400px;
}
/* 元画像のアニメーションタイプ */
.contentBlock.change figure{
	animation: wipeCvCl 1s ease-out forwards;
}
/* 切替用の画像とアニメーションの適用 */
.contentBlock.change::before{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	height: 100%;
	background-image: url('../images/middle/load.jpg');
	background-size: cover;
	animation: wipeCvCh 1s ease-out forwards;
}
/* 切替えエフェクト */
.contentBlock.change::after{
	content: '';
	display: block;
	position: absolute;
	z-index: 2;
	top: 0;
	height: 100%;
	background: linear-gradient(
	to right, rgb(38,255,219) 0,  
	rgba(137, 218, 32, 0.5) 50%,
	rgb(255,235,0) 100%
	);
	mix-blend-mode: color-dodge;
	animation: wipeCvFx 1s ease-out both;
}

/* 複数画像用の画像URL */
.contentBlock.num1.change::before{
	background-image: url('../images/middle/load.jpg');
}

ワイプ効果で色々遊んでみました。
マウスオーバーでのワイプ効果：https://labo.studio-happyvalley.com/wipe/hover/
ワイプ効果のカバーアニメ色々：https://labo.studio-happyvalley.com/wipe/simple/