Question

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

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

＆＃13;

@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
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body class="c-animated-background">
</body>

</html>

＆＃13;

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

这是一个掠夺者：https://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy?p=preview

Answer 1

请检查更新后的答案，希望对您有所帮助。目前我认为没有必要移动身体。但是你可以在里面定义一个除法，并使它与身体相对。

当以负值定义时，大众运作不佳。请查看更新的答案

＆＃13;

@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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

持续时间没有问题。在这里你开始使用-30vh，以70vh（100-30）结束，就像平滑过渡一样简单。请查看下面的代码段以供参考。

＆＃13;

@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
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body class="c-animated-background">
</body>

</html>

＆＃13;

Answer 3

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

这适用于jsfiddle：

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

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

古德勒克，

Fabian＃Web-Stars

Answer 4

试试这段代码。

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

其次，我给了宽度＆amp;根据视口使用视口单元的高度值。

如果有任何问题在下面发表评论。

＆＃13;

@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;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="animated-background"></div>
</body>

</html>

＆＃13;

Answer 5

测试此：

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

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

CSS - 无限动画（移动到右侧加载渐变）闪烁

5 个答案: