让元素在不同的时间闪耀答案

【问题标题】：make elements shine at variable times让元素在不同的时间闪耀
【发布时间】：2018-05-09 16:37:36
【问题描述】：

我创建了一个 CSS 动画，该动画在具有指定类的所有元素上产生“闪耀”效果。

光泽本身很完美，但是，由于它们同时发光，它看起来相当不自然。

我一直在集思广益，以不同的方式来改变每个元素的发光时间 - 但我似乎无法完全理解它，而且我尝试过的所有方法都不是有效的，或者只是不一起工作。

    .loading-element{
        position: relative;
        background: #e0e0e0;
    }
    .loading-element::after{ /* this is the animated pseudo-element */
    	content: "";
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,
        			rgba(255,255,255,0.8) 50%,
        			rgba(247,247,247,0) 99%,
        			rgba(247,247,247,0) 100%);
        transform: translateX(100%);
        animation: shine 1s infinite 3s;
    }
    .index-load_track-item{
        width: 426px;
        height: 117px;
        margin: 30px 0;
    }
    .index-load-track_outer-artwork, .index-load-track_outer-waveform{
    	float: left;
    }
    .index-load-track_outer-artwork{
        width: 117px;
        height: 117px;
        margin-right: 9px;
    }
    .index-load-track_outer-artwork .loading-element{
    	width: 100%;
    	height: 100%;
    }
    .index-load-track_outer-waveform{
        width: 300px;
        height: 60px;
    }
    .index-load-track_outer-waveform .loading-element{
    	width: 100%;
    	height: 100%;
    }
    
    /* animation */
    @keyframes shine{
    	0%{ transform:translateX(-100%); }
    	100%{ transform:translateX(100%); }
    }

    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>
    <div class="index-load_track-item">
      <div class="index-load-track_outer-artwork">
    		<div class="loading-element"></div>
    	</div>
    	<div class="index-load-track_outer-waveform">
    		<div class="loading-element"></div>
    	</div>
    </div>

【问题讨论】：

我为你创建了一个 sn-p - 我很确定这将作为一个主要基于意见类型的问题而脱离主题
@mplungjan（不是粗鲁）但只是好奇这是如何“主要基于意见”？
看起来很不自然。我一直在集思广益，以不同的方式来改变每个元素的发光时间 似乎您不喜欢它，并寻求建议以某种方式以未指定的方式更改它。我没有投票结束。只是想提一下
@mplungjan 啊，这很公平！感谢您的解释:)
如果您只是应用不同的动画延迟，这可能是最有意义的。负值允许创建动画的“延迟开始”。

标签： html css animation

【解决方案1】：

如果你可以使用一些 jQuery，我建议你这样做：
（我用 cmets 添加了一些 CSS 代码以避免不必要的行为）

// On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "animation-delay": (-10 * Math.random()) + "s",
    "animation-duration": (1 + 2 * Math.random()) + "s"
  });
});

.loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  top: 0;
  filter: blur(5px); /* Added, just to try with it */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(247, 247, 247, 0) 99%, rgba(247, 247, 247, 0) 100%);
  transform: translateX(100%);
  /* animation: shine 1s infinite 3s; 
  now decomposed as below: */
  animation-name: shine;
  animation-duration: inherit;
  animation-iteration-count: infinite;
  animation-delay: inherit;
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

⋅ ⋅ ⋅

这也可以使用 CSS 变量来完成！
如果您可以使用它，那么在我看来，这是一种更好、更简单的方法。

// On load, add random delays and durations to each of the ".loading-element"s
$('.loading-element').each(function(e) {
  $(this).css({
    "--shine-delay": (-10 * Math.random()) + "s",
    "--shine-duration": (1 + 2 * Math.random()) + "s"
  });
});

.loading-element {
  position: relative;
  background: #e0e0e0;
  /* Added below to avoid the shine being outside
  and the scroll bars to appear as in your snippet */
  overflow: hidden;
}

.loading-element::after {
  /* this is the animated pseudo-element */
  content: "";
  position: absolute;
  /* top and bottom modified so that blur doesn't add empty bars */
  top: -10px;
  bottom: -10px;
  filter: blur(8px); /* Added, just to try with it */
  width: 100%;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.0) 10%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.0) 90%,
    rgba(255, 255, 255, 0.0) 100%
  );
  transform: translateX(100%);
  animation: shine var(--shine-duration) infinite var(--shine-delay); /* <3 */
}

.index-load_track-item {
  width: 426px;
  height: 117px;
  margin: 30px 0;
}

.index-load-track_outer-artwork,
.index-load-track_outer-waveform {
  float: left;
}

.index-load-track_outer-artwork {
  width: 117px;
  height: 117px;
  margin-right: 9px;
}

.index-load-track_outer-artwork .loading-element {
  width: 100%;
  height: 100%;
}

.index-load-track_outer-waveform {
  width: 300px;
  height: 60px;
}

.index-load-track_outer-waveform .loading-element {
  width: 100%;
  height: 100%;
}


/* animation */

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>
<div class="index-load_track-item">
  <div class="index-load-track_outer-artwork">
    <div class="loading-element"></div>
  </div>
  <div class="index-load-track_outer-waveform">
    <div class="loading-element"></div>
  </div>
</div>

希望对你有帮助。

【讨论】：