CSS3 滑动渐变动画 - 工作原理

Question

以下代码无需任何行 javascript 代码即可生成滑动渐变动画：

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0
}

@keyframes loading {
  from {
    background-position: -5000% 0, 0 0
  }
  to {
    background-position: 5000% 0, 0 0
  }
}

.skeleton {
  height: 100%;
  animation-name: loading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(#e5e5e5 100%, transparent 0);
  background-size: 99% 100%;
}

<div class="skeleton"></div>

我试验了一些属性，但仍然不明白它是如何工作的。尤其是当background-size: 99% 100%;改为background-size: 100% 100%;时，动画会向相反的方向滑动！

你能解释一下吗？

Answer 1

我不知道你的浏览器是什么以及它的版本。但是在我的电脑上，如果 background-size: 100% 100% 那么动画就会停止。（实际上，background-position 将被忽略）

这个技巧的想法是将 background-image（线性梯度）移动 background-position。（查看下面代码中的注释了解详情）

关于你的第二个问题，你应该参考这个答案。快速总结一下，如果 background-size 达到 100%，则不能对 background-position 使用百分比。发生这种情况是因为背景中的图像没有 space 可移动。

如果你坚持用background-size100%。恐怕你必须使用绝对值。

顺便说一句，我已经升级了代码。现在看起来好多了。

html {
  height: 100%
}

body {
  height: 100%;
  margin: 0
}

@keyframes loading {/* original code */
  from {/* This is the position of image of the first frame */
    background-position: -5000% 0, 0 0
  }
  to {/* This is the pos of img of the last frame */
    background-position: 5000% 0, 0 0
  }
}

@keyframes betterLoading {
  0% {/* This is the position of image of the first frame */
    background-position: -5000% 0, 0 0
  }
  50% {
    /* This is the pos of img of a frame in the middle happening animation */
    /* If duration is 1s then the pos below will be at 0.5s */
    background-position: 5000% 0, 0 0
  }
  100% {/* This is the pos of img of the last frame */
    background-position: -5000% 0, 0 0
  }
}

.skeleton {
  height: 100%;
  animation-name: betterLoading;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  background-color: #fff;
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0)), linear-gradient(green 100%, transparent 0);
  background-size: 99% 100%, cover;
}

<div class="skeleton"></div>

CSS3 滑动渐变动画 - 工作原理

CSS3 sliding gradient animation - how it works

html

css

keyframe

css-animations