CSS 渐变动画无效

Question

我正在尝试制作动画 CSS 渐变背景，我正在为本页的渐变生成 CSS：http://www.gradient-animator.com/ 这是 css:

body {
background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640);
background-size: 600% 600%;
-webkit-animation: Gradient 60s ease infinite;
-moz-animation: Gradient 60s ease infinite;
animation: Gradient 60s ease infinite;
@-webkit-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes Gradient { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

它可以很好地输出渐变，但不会对其进行动画处理。我错过了什么吗？这是fiddle：http://jsfiddle.net/9s9g6ktu/

Answer 1

是的....您必须关闭 body css 并让您的关键帧动画自动生效。像这样http://jsfiddle.net/9s9g6ktu/1/

CSS 渐变动画无效

CSS Gradient animation not working

html

css

gradient