CSS-Hintergrund Gradiant-Animation funktioniert nicht

Question

Diese Animation funktioniert nicht. Ich kann nicht herausfinden, warum. Kann mir bitte jemand dabei helfen?

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

Ich möchte meinen Hintergrund mit Farbverlauf animiert werden. Was ist falsch an dem obigen Code?

Answer 1

Sie definieren Ihre Keyframes innerhalb der Regeln für das Tag body. Sie haben auch die falsche animation-name für -moz-animation und definiert. Hier ist die fixierte Version Ihres 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% 
 
    } 
 
}