从 DIV 溢出的动画背景

Question

我正在尝试创建类似加载的效果，但我不确定这是否是正确的方法。

我正在尝试从左到右对其进行动画处理，但它既不是从左开始也不是从右结束。它从 DIV 溢出。我尝试使用overflow: hidden 和left: 0，但这也不起作用。显然，我的方法是错误的或遗漏了什么。请帮忙。

这是我目前所拥有的：JSFIDDLE DEMO

.timeline__story {
  width: 100%;
  background-color: #f3f3f3;
  border: 1px solid #aaa;
  padding: 15px;
}
.timeline__blank {
  position: relative;
}
.timeline__blink {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: joey 3s ease-in-out infinite;
  background: -moz-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background: -webkit-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background: linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background-repeat: no-repeat;
  z-index: 1;
}
@keyframes joey {
  0%   {left: 0; top: 0;}
  50%  {left: 50%; top: 0;}
  100% {left: 0; top: 0;}
}

<div class="timeline__story timeline__blank">
  <div class="timeline__blink">&nbsp;</div>
  <div>
       This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. 
  </div>
</div>

Answer 1

这是我的解决方案，它并不完美，但它会给你一个起点。

我给.timeline__blink定了宽度

我将关键帧的left 值设为-50px，将其推到左侧框外。

还将overflow:hidden 给.timeline__story

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 15px;
}

.timeline__story {
  width: 100%;
  background-color: #f3f3f3;
  border: 1px solid #aaa;
  padding: 15px;
  overflow: hidden;
}

.timeline__blank {
  position: relative;
}

.timeline__blink {
  width: 50px;
  height: 100%;
  position: absolute;
  animation: joey 3s ease-in-out infinite;
  background: linear-gradient(-65deg, transparent 0%, transparent 20%, transparent 30%, #A5C8E5 50%, transparent 60%, transparent 70%, transparent 0%);
  background-repeat: no-repeat;
  z-index: 1;
}

@keyframes joey {
  0% {
    left: -50px;
    top: 0;
  }
  50% {
    left: 100%;
    top: 0;
  }
  100% {
    left: -50px;
    top: 0;
  }
}

<div class="timeline__story timeline__blank">
  <div class="timeline__blink">&nbsp;</div>
  <div>
    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
    This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample
    text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text.
  </div>
</div>

Answer 2

注意：通过使用相对单位，您的动画将更好地呈现在不同的视口上。

尝试添加以下更改：

对于.timeline__story

max-width: 100vw;
overflow: hidden;

对于 @keyframes joey 动画

@keyframes joey {
  0%   {left: -45%; top: 0;}
  50%  {left: 45%; top: 0;}
  100% {left: -45%; top: 0;}
}

---

预览：

.timeline__story {
  max-width: 100vw;
  background-color: #f3f3f3;
  border: 1px solid #aaa;
  padding: 15px;
  overflow: hidden;
}
.timeline__blank {
  position: relative;
}
.timeline__blink {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: joey 3s ease-in-out infinite;
  background: -moz-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background: -webkit-linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background: linear-gradient(-65deg, transparent 0%, transparent 45%, transparent 48%, #A5C8E5 50%, transparent 52%, transparent 55%, transparent 0%);
  background-repeat: no-repeat;
  z-index: 1;
}
@keyframes joey {
  0%   {left: -45%; top: 0;}
  50%  {left: 45%; top: 0;}
  100% {left: -45%; top: 0;}
}

<div class="timeline__story timeline__blank">
  <div class="timeline__blink">&nbsp;</div>
  <div>
       This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. This is a sample text. 
  </div>
</div>