代码之家 › 专栏 › 技术社区 › Paul

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

keyframe css-animations css3 html

Paul · 技术社区 · 7 年前

以下代码生成无任何一行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%; 动画以相反的方向滑动!

你能解释一下吗?

1 回复 | 直到 7 年前

Star Light 7 年前

我不知道你的浏览器和它的版本是什么。但在我的电脑上,如果 background-size: 100% 100% 然后动画将停止。(实际上, background-position 将被忽略)

这个把戏的想法很感人 background-image (线性梯度) 背景位置 . (请查看下面代码中的注释了解详细信息)

关于你的第二个问题,你应该参考这个答案 CSS background-position ignored when using background-size . 快速总结,不能将百分比用于 背景位置 如果 background-size 达到100%。这是因为背景中的图像没有空间移动。

如果你坚持使用 背景尺寸 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>