CSS背景グラデーションアニメーションが動作しない

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