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标记的规则中定义关键帧。您还为animation-name和-moz-animation定义了错误的animation。这是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%
  }
}