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>

从DIV溢出的动画背景

2 个答案: