时间戳

首页 > 解决方案 > CSS3 滑动渐变动画 - 它是如何工作的

html - CSS3 滑动渐变动画 - 它是如何工作的

问题描述

以下代码无需任何 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%;动画时向相反方向滑动！

你能解释一下吗？

标签： htmlcsscss-animationskeyframe

解决方案

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

这个技巧的想法是移动background-image（线性梯度）background-position。（查看下面代码中的注释以获取详细信息）

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

如果您坚持使用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>

推荐阅读