# Animated Gradient Mixin

The background of this hero area is a subtle example, creating the gradient from transparency and semi-transparent black, but you can plug in any colours you see fit. Scroll to the bottom to see a full colour example.

### 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;

# Full Colour Example