CSS background gradiant animation not working

Question

此動畫無效。我無法弄清楚爲什麼。有人可以幫助我嗎？

body { 

background: linear-gradient(227deg, #8d369b, #3aa9bb, #e145f2); 
background-size: 600% 600%; 

-webkit-animation: Test 36s ease infinite; 
-moz-animation: AnimationName 36s ease infinite; 
animation: AnimationName 36s ease infinite; 

@-webkit-keyframes Test { 
0%{background-position:0% 51%} 
50%{background-position:100% 50%} 
100%{background-position:0% 51%} 
} 
@-moz-keyframes Test { 
0%{background-position:0% 51%} 
50%{background-position:100% 50%} 
100%{background-position:0% 51%} 
} 
@keyframes Test { 
0%{background-position:0% 51%} 
50%{background-position:100% 50%} 
100%{background-position:0% 51%} 
}} 

我想讓我的背景用梯度動畫。上面的代碼有什麼問題？

Answer 1

您正在定義body標記規則中的關鍵幀。您還爲-moz-animation和animation定義了錯誤的animation-name。這是您的CSS的固定版本。

body { 
 
    background-image: linear-gradient(227deg, #8d369b, #3aa9bb, #e145f2); 
 
    background-size: 600% 600%; 
 
    -webkit-animation: Test 36s ease infinite; 
 
    -moz-animation: Test 36s ease infinite; 
 
    animation: Test 36s ease infinite; 
 
} 
 
@-webkit-keyframes Test { 
 
    0% { 
 
    background-position: 0% 51% 
 
    } 
 
    50% { 
 
    background-position: 100% 50% 
 
    } 
 
    100% { 
 
    background-position: 0% 51% 
 
    } 
 
} 
 
@-moz-keyframes Test { 
 
    0% { 
 
    background-position: 0% 51% 
 
    } 
 
    50% { 
 
    background-position: 100% 50% 
 
    } 
 
    100% { 
 
    background-position: 0% 51% 
 
    } 
 
} 
 
@keyframes Test { 
 
    0% { 
 
    background-position: 0% 51% 
 
    } 
 
    50% { 
 
    background-position: 100% 50% 
 
    } 
 
    100% { 
 
    background-position: 0% 51% 
 
    } 
 
}