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