CSS动画渐变标题

Question

我想将动画渐变应用于我的标题类。出于某种原因，我无法得到这个工作。

我试图做到这一点，但不是身体，只是头。 https://www.gradient-animator.com/

这是怎么回事？任何人都可以帮助我指出正确的方向吗？

的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; 
} 

你没有提到的背景大小..这就是问题