<div class="middle">
	<h1>Animation</h1>
</div>

body{
	margin: 0;
	padding: 0;
	font-family: "montserrat",sans-serif;
	background: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101012/bg_v0tw74.png) no-repeat;
	background-size: cover;
}
.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.middle h1{
	font-size: 100px;
	text-transform: uppercase;
	font-weight: 900;
	color: #2c3e5036;
	background-image: url(https://res.cloudinary.com/drcrre4xg/image/upload/v1571101002/water_zvupjx.png);
	-webkit-background-clip:text;
	animation: water 15s infinite;
}
@keyframes water {
	from{
		background-position: left 0 top 0;
	}
	to{
		background-position: left 1000px top 0;
	}
}

/*
* Link: https://darkcode1.blogspot.com/2018/09/cool-text-animation-water-animation.html
*/