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。（有关详细信息，请参见下面的代码中的注释）

关于第二个问题，您应该参考此答案CSS background-position ignored when using background-size。快速总结，如果background-position达到100％，则不能为background-size使用百分比。发生这种情况是因为背景中的图像没有移动空间。

如果您坚持将background-size与100％一起使用。恐怕您必须使用绝对值。

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

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滑动渐变动画-工作原理

1 个答案: