pedroarrman/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>Scrolling CSS gradient</title>

		<style>
			body {
				background: #222;
				margin: 0;
				padding: 0;
				color: white;
			}

			.description {
				padding: 100px 40px;
				font-size: 120%;
			}

			.animated-gradient {
				background: repeating-linear-gradient(to right, #f00 0%, #0f0 33%, #00f 66%, #f00 100%);
				width: 100%;
				height: 10px;
				background-size: 200% auto;
				background-position: 0 100%;
				animation: gradient 15s infinite;
				animation-fill-mode: forwards;
				animation-timing-function: linear;
			}

			@keyframes gradient {
				0% {
					background-position: 0 0;
				}

				100% {
					background-position: -200% 0;
				}
			}
		</style>

	</head>
	<body>

		<div class="animated-gradient"></div>

		<p>Animated infinitely scrolling gradient.</p>

	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Scrolling CSS gradient</title>

	<style>
	body {
	background: #222;
	margin: 0;
	padding: 0;
	color: white;
	}

	.description {
	padding: 100px 40px;
	font-size: 120%;
	}

	.animated-gradient {
	background: repeating-linear-gradient(to right, #f00 0%, #0f0 33%, #00f 66%, #f00 100%);
	width: 100%;
	height: 10px;
	background-size: 200% auto;
	background-position: 0 100%;
	animation: gradient 15s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	}

	@keyframes gradient {
	0% {
	background-position: 0 0;
	}

	100% {
	background-position: -200% 0;
	}
	}
	</style>

	</head>
	<body>

	<div class="animated-gradient"></div>

	<p>Animated infinitely scrolling gradient.</p>

	</body>
	</html>