为什么线性渐变加上background-size会有动画？

Question

今天是在看别人的音乐播放器效果，突然对个这效果很好奇，就试着自己实现了。

刚开始加上animation，一直没有动画，然后又和原代码进行了比较，发现原代码上加了background-size，顶着满脸问号自己也加了，发现竟然动起来了？！！！但是为什么，而且为什么是400%。求大神指教o(╥﹏╥)o

以下是原代码--

 .box1::after,
    .box1::before{
      content: '';
      width: 205px;
      height: 205px;
      border-radius: 50%;
      position: absolute;
      top: -2px;
      left: -2px;
      z-index: -1;
      background: linear-gradient(45deg,
          #ff00ee,
          #0000ff,
          #00ff00,
          #ff0000,
          #ff00ee,
          #0000ff,
          #00ff00,
          #ffff00,
          #ff0000);
      animation: animate 20s linear infinite;
      background-size: 400%;
    }

    .box1::after {
      filter: blur(20px);
    }

    @keyframes animate {
      0% {
        background-position: 0 0;
      }

      50% {
        background-position: 400% 0;
      }

      100% {
        background-position: 0 0;
      }
    }

Answer 1

因为这个彩色环的形成是靠伪元素的背景溢出元素的部分呈现的，如果你不设置一个较大的background-size的话，默认就是 100%，此时伪元素的背景是被元素背景/内容遮蔽的，看都看不见，更不要说出现动画效果了。
至于为什么是 400%，应该是要大于等于关键帧里出现的最大位移量 400%，过大了设置的颜色显示不全，太小了可能会出现一段时间的空白。
还有这样的实现貌似会有兼容性问题，试试旧版 Safari。

Answer 2

简单的理解就是，在 @keyframes 中通过 3 个关键帧改变了背景图（也就是渐变色）的位置。
考虑到 background-size: 400%; 这个值，所以，在 3 个关键帧的中间位置，设置 background-position 的偏移量为 400%，然后再移回去，形成一个循环。

无限循环，从 0 -> 400% -> 0，来回移动。

按照这个情况，可以这样写：

• 在 animation 属性中增加一个 alternate，就像这样 animation: animate 20s linear infinite alternate; 就可以让动画在播放结束后倒着回放；
• 其次就可以把 @keyframes 中的帧数减少

@keyframes animate {
  50% {
    background-position: 400% 0;
  }
}