基于宽度元素的动画背景

Question

我有 4 个具有渐变背景的元素要设置动画。

我创建了一个示例：

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

html,
body {
  height: 100%;
}

<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

这是动画：

@keyframes slide {
  from { background-position: 0 0; }
  to { background-position: 1300px 0; }
}

如您所见，它设置为 1300px 因此其他元素的动画不正确

Answer 1

您可以像下面这样调整您的代码：

.element div {
  display: inline-block;
  height: 16px;
  animation: slide 2s infinite;
  animation-timing-function: linear;
  background: 
    linear-gradient(90deg, rgba(242,243,245,1) 0%, rgba(242,243,245,1) 40%, rgba(223,223,223,1) 50%, rgba(242,243,245,1) 60%, rgba(242,243,245,1) 100%);
  background-size:200% 100%; /*added this*/
}

.element div:nth-child(1) {width: 75%;}
.element div:nth-child(2) {width: 65%;}
.element div:nth-child(3) {width: 55%;}
.element div:nth-child(4) {width: 45%;}

@keyframes slide {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

<div class="element">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您可以查看此答案了解更多详情：

基于宽度元素的动画背景

Animate background based on width element

css

linear-gradients

css-animations