html - 背景大小卡在超过 100% 的值上？

Question

试图弄清楚这里发生了什么。在 http://www.gradient-animator.com/ 上看到了一个非常酷的如何进行背景转换的示例

但是，当我将它们插入我的测试站点时，背景保持稳定并且不会进行转换，直到您在开发人员控制台中禁用 background-size 属性，然后重新启用它。

我只是为了我的生活，无法弄清楚出了什么问题......

@-webkit-keyframes gbpr {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gbpr {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gbpr { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.container {
  height: 100%;
  width: 100%;
}
body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.container {
  background: linear-gradient(270deg, #0ae6ae, #2d80f3, #bd2df3, #f32d57);
  background-size: 800% 800%;

  -webkit-animation: gbpr 30s ease infinite;
  -moz-animation: gbpr 30s ease infinite;
  animation: gbpr 30s ease infinite;
}

<div class="container">

</div>

Answer 1

如果在线性渐变中包含 !important，动画将无法移动它。就那么简单。