2016-05-18 89 views
-1

我想將動畫漸變應用於我的標題類。出於某種原因,我無法得到這個工作。CSS動畫漸變標題

我試圖做到這一點,但不是身體,只是頭。 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>

回答

0

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

你沒有提到的背景大小..這就是問題

+0

非常感謝您!我也想到了這一點。這是一個漫長的夜晚。 – Wade