Wade Wade - 6 months ago 41
HTML Question

CSS Animated Gradient Header

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

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