svgとCSSアニメーションによるPCの画面操作の解説です。このサンプルでは、「マウスカーソルを画面で右上のボタンに移動、クリックし、モーダルウィンドウを表示させ、そのメニューの一番上を選択する」、という解説が、svg画像（インライン）をベースにCSSアニメーションで表現されています。

アニメーション部分のCSSソース

.section1 {
	animation: setblue ease 6s 3.8s infinite;
}
.media {
	animation: setblue ease 6s 5s infinite;
}
@keyframes setblue {
	0% {
		fill: #cccccc;
	}
	15% {
		fill: #007AFF;
	}
}
.selection1 {
	opacity: 0;
	animation: popup ease 6s 2.8s infinite;
}
@keyframes popup {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	70% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
.cursor {
	animation: fadeInLeft both 1s 0.8s, cursor ease 6s 2s infinite;
	transition: all 1s cubic-bezier(.1, .8, .2, 1);
}
@keyframes cursor {
	0% {
		opacity: 0;
		transform: translate(-60px, -50px);
	}
	5% {
		opacity: 1;
	}
	15% {
		transform: translate(0, -10px);
	}
	30% {
		transform: translate(45px, -10px);
	}
	45% {
		transform: translate(45px, -10px);
	}
	60% {
		transform: translate(0, -10px);
	}
	75% {
		transform: translate(0, -10px);
	}
	95% {
		opacity: 1;
		transform: translate(0, -10px);
	}
	100% {
		opacity: 0;
		transform: translate(0, -10px);
	}
}