CSS Animated Gradient Header - html

Question

I am trying to apply a animated gradient to my header class. For some reason I am not able to get this to work.
I'm trying to do this but not to the body, just the header. https://www.gradient-animator.com/
What's going on here? Can anyone help point me in the right direction?
The HTML, CSS
.business-header {
background: linear-gradient(50deg, #282466, #ffc500);
height: 400px;
-webkit-animation: test 2s ease infinite;
animation: test 2s ease infinite;
}
#-webkit-keyframes test {
0%{background-position:51% 0%}
50%{background-position:20% 100%}
100%{background-position:51% 0%}
}
#-moz-keyframes test {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
#keyframes test {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
}
<header class="business-header">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="tagline"></h1>
</div>
</div>
</div>
</header>

Answer 1

Working Fiddle
.business-header {
background: linear-gradient(270deg, #a4ffe8, #092f25);
background-size: 400% 400%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
min-height: 100%;
min-width: 100%;
height:400px;
}
You did not mention the background size.. that was the problem