CSS - 无限动画（向右加载渐变）闪烁答案

【问题标题】：CSS - infinite animation (moving to right loading gradient) is flickeringCSS - 无限动画（向右加载渐变）闪烁
【发布时间】：2018-03-16 15:44:34
【问题描述】：

我在这里学习本教程：https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

创建一个虚拟加载器。不幸的是，本教程包含固定的像素值，我希望它可以在各种尺寸的屏幕上工作。所以我调整了这样的动画：

@keyframes placeHolderShimmer {
  0% {
    background-position: -30vw 0
  }
  100% {
    background-position: 30vw 0
  }
}

.c-animated-background {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: fff;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: 50px;
  -webkit-backface-visibility: hidden
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body class="c-animated-background">
</body>

</html>

不幸的是，在 1.5 秒后动画结束时，灰色区域会向前或向后跳跃，具体取决于我设置的关键帧背景位置值。我怎样才能防止这种情况并使过渡顺利进行？此外，动画在性能上似乎比我想象的更强烈 - 当我想用我的 macbook 2016' 在 chrome 中检查开发模式下的背景元素时，它会挂起大约 15 秒。我应该改用过渡/变换动画吗？

这里是一个笨蛋：https://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy?p=preview

【问题讨论】：

理想情况下，您应该使用100vw 和-100vw。将速度提高到5s，它的速度与您现在的速度相同。 Example
谢谢@misterManSam，您的回答效果最好，但它如此简单。完美！

标签： html css animation

【解决方案1】：

试试这段代码。

我所做的是将关键帧值转换为 from-to 对，因为您只有 2 个阈值并且不需要使用 % 值。

其次，我使用视口单位根据视口给出宽度和高度值。

如果有任何问题请在下方评论。

@keyframes placeHolderShimmer {
  from {
    background-position: -468px 0
  }
  to {
    background-position: 468px 0
  }
}

.animated-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f8;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  background-size: 800px 104px;
  width: 100vw;
  height: 100vh;
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="animated-background"></div>
</body>

</html>

【讨论】：

这个可以跳过，不会调整大小。

【解决方案2】：

请查看更新后的答案，希望对您有所帮助。目前我认为没有必要移动身体。但是您可以在其中定义一个划分并使其相对于 body 成为绝对的。

当定义为负值时，VW 不能正常工作。请检查更新的答案

@keyframes placeHolderShimmer {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 100em 0;
  }
}

.c-animated-background {
  animation-duration: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: fff;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  height: 100%;
  width: 100%;
  position: absolute;
  padding-top: 50px;
  -webkit-backface-visibility: hidden;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
 <div class="c-animated-background">
 </div>
</body>

</html>

【讨论】：

这个可以跳过，不会调整大小。

【解决方案3】：

1.5 秒后，动画将从 0 开始。这就是它闪烁的原因。

这在 jsfiddle 中有效：

0% {
  background-position: -30vw 0
}
100% {
  background-position: 70vw 0
}

请参阅JSFiddle 以使其更清楚。这取决于屏幕的宽度。

祝你好运，

费边#网络明星

【讨论】：

【解决方案4】：

持续时间没有问题。在这里，您从 -30vh 开始，因此以 70vh(100-30) 结束，就像平滑过渡一样简单。查看下面的 sn-p 以供参考。

@keyframes placeHolderShimmer {
  0% {
    background-position: -30vw 0
  }
  100% {
    background-position: 70vw 0
  }
}

.c-animated-background {
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: fff;
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  height: 100%;
  width: 100%;
  position: relative;
  padding-top: 50px;
  -webkit-backface-visibility: hidden
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body class="c-animated-background">
</body>

</html>

【讨论】：

【解决方案5】：

测试一下：

@keyframes placeHolderShimmer{
    0% {
        background-position: -50vw 0
    }

    100% {
        background-position: 50vw 0
    }
}

【讨论】：