我创建了一个 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>
答案 0 :(得分：2)
如果你可以使用一些jQuery，我建议你做这样的事情：
（我添加了一些带注释的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>
我希望它有所帮助。