CSS3 で作成された背景グラデーションアニメーション効果

<h1 class="text-light">純粋な CSS アニメーション グラデーション背景</h1>

<div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
	<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="d-block btn btn-outline-light" download><i class="fas fa-file-download mr-2"></i>ソースをダウンロード</a>
	<a href="https://manuelpinto.in" target="_blank" class="d-block btn btn-outline-light">私のウェブサイトをご覧ください<i class="fas fa-external-link-square-alt ml-2"></i></a>
</div>

<h6 class="text-light small font-weight-bold"><i class="fas fa-code"></i> と <i class="fas fa-heart"></i> を Manuel Pinto がデザイン</h6>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>

体 {
	背景: 線形グラデーション(-45度, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	背景サイズ: 400% 400%;
	アニメーション: グラデーション 15 秒、イーズ 無限;
}

@keyframes グラデーション {
	0% {
		背景位置: 0% 50%;
	}
	50% {
		背景位置: 100% 50%;
	}
	100% {
		背景位置: 0% 50%;
	}
}