Code

					
@mixin background-gradient-animation($colour-one, $colour-two, $colour-three, $angle, $length, $iteration) {
	background: $colour-one;
	background: linear-gradient($angle, $colour-one 0%, $colour-two 52%, $colour-three 100%);
	background-size: 500% 500%;
	animation: animation-background-gradient $length ease $iteration;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
}

@keyframes animation-background-gradient {

	0% {
		background-position: 0% 5%;
	}
	
	50% {
		background-position: 100% 95%;
	}
	
	100% {
		background-position: 0% 5%;
	}
	
}
					
				

Useage

					
@include background-gradient-animation(
	rgba(255,255,255,0.4), // colour one
	rgba(255,255,255,1), // colour two
	rgba(255,255,255,0.4), // colour three
	135deg, // background angle
	30s, // animation length
	infinite // iteration
);
					
				

Compiled

					
background: rgba(0, 0, 0, 0.8);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
background-size: 500% 500%;
animation: animation-background-gradient 30s linear infinite;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
margin: 0 auto;