logo标签列表

CSS - 无限动画（向右移动的加载渐变）在闪烁。

htmlcssanimation
5

我在按照这个教程：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秒内，灰色区域会向前或向后跳动，这取决于我设置的关键帧背景位置值。我该如何防止这种情况并使过渡更加平滑？此外，动画似乎比我想象中的更影响性能 - 当我想要在Chrome的开发者模式下使用我的Macbook 2016检查背景元素时，它会挂起大约15秒。也许我应该改用transition/transform-animation吗？
以下是一个plunker链接: https://plnkr.co/edit/X8PBIUYmAC11LCUV9uTy?p=preview
1
理想情况下，您可以使用 100vw 和 -100vw。将速度提高到 5s，它与您现在拥有的速度相同。例子 - misterManSam
谢谢 @misterManSam，您的答案最好，并且非常简单。完美！ - Phil
6个回答
10

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

当以负值定义时，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>

1
这可以跳过并且不会调整大小。 - misterManSam
8

关于时间长度没有任何问题。在这里，您从-30vh开始，因此将其结束为70vh（100-30），以便过渡更加平滑。请参考以下片段。

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

3

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

.c-animated-background {
  animation: 3s linear infinite placeHolderShimmer;
  background: linear-gradient(to right, #eeeeee 0%, #dddddd 8%, #eeeeee 16%, #eeeeee 50%, #dddddd 58%, #eeeeee 66%);
  background-size: 200%;
  height: 100%; width: 100%;
}
<body class="c-animated-background"></body>

1
这个解决方案非常好，因为它不会硬编码任何大小值，所以对于给定元素的大小没有任何假设。 - lucas
2

1.5秒后，动画将从0开始。这就是为什么它会闪烁。

在jsfiddle中可以正常工作：

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

请查看JSFiddle以更清晰地了解。这取决于屏幕的宽度。

祝好运，

Fabian #Web-Stars

0

试试这段代码。

我的做法是将关键帧值转换为从-至对，因为您只有两个阈值，并且不需要使用百分比值。

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

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

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

3
可以跳过并且不会调整大小。 - misterManSam
-1

测试一下：

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

    100% {
        background-position: 50vw 0
    }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接