将随机动画延迟分配给类的每个元素

Question

我有一堆雷达闪光，我已经创建并放置在"地图"上。此刻，它们都同时出现。我想知道是否有办法给他们所有单独的animation-delay，同时仍然保留 1.6 秒的动画延迟.delayedBlip.

为了详细说明，我希望每个带有类名的元素.blip都有一个随机持续时间为 1-2 秒的animation-delay分配给它。在此之后，我需要它的同级.delayedBlip使其延迟为blip动画后的 1.6 秒。

相关代码如下：

.table {
width: 600px;
height: 450px;
background: url('https://i.imgur.com/6QPG66E.jpg');
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
background-color: #133342;
border: solid 3px rgba(127, 222, 254, 0.2);
border-radius: 15px;
transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
margin-top: 200px;
opacity: 0.8;
margin-left: 15%;
overflow: hidden;
}
#radarline {
background: -webkit-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
background: -o-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
background: linear-gradient(to right, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001db9e0', endColorstr='#001db9e0', GradientType=1);
/* IE6-9 */
width: 30px;
height: 1400px;
transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
margin-top: -475px;
margin-left: 0;
animation-name: radarline;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes radarline {
from {
margin-left: -30px;
}
to {
margin-left: 630px;
}
}
.blip {
margin: 0 0;
position: absolute;
border-radius: 50%;
background-color: rgba(0, 211, 255, 1.00);
opacity: 1;
width: 25px;
height: 25px;
}
.blipping {
border-radius: 50%;
-webkit-animation: scaleUp 2.3s infinite linear;
animation: scaleUp 2.3s infinite linear;
}
.delayedBlip {
-webkit-animation-delay: -1.6s;
animation-delay: -1.6s;
}
@keyframes scaleUp {
0% {
opacity: 1;
transform: scale(0);
}
40% {
opacity: 0.5;
transform: scale(0.5);
}
100% {
opacity: 0;
transform: scale(1.0);
}
}
@-moz-keyframes scaleUp {
0% {
opacity: 1;
-moz-transform: scale(0);
}
40% {
opacity: 0.5;
-moz-transform: scale(0.5);
}
100% {
opacity: 0;
-moz-transform: scale(1.0);
}
}
@-webkit-keyframes scaleUp {
0% {
opacity: 1;
-webkit-transform: scale(0);
}
40% {
opacity: 0.5;
-webkit-transform: scale(0.5);
}
100% {
opacity: 0;
-webkit-transform: scale(1.0);
}
}

<div class="table">
<div id="radarline"></div>
<div class="blips">
<div class="blipping blip" style="margin-left: 300px; top: 300px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 300px; top: 300px;"></div>
<div class="blipping blip" style="margin-left: 200px; top: 100px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 200px; top: 100px;"></div>
<div class="blipping blip" style="margin-left: 100px; top: 30px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 100px; top: 30px;"></div>
<div class="blipping blip" style="margin-left: 400px; top: 250px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 400px; top: 250px;"></div>
<div class="blipping blip" style="margin-left: 120px; top: 280px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 120px; top: 280px;"></div>
<div class="blipping blip" style="margin-left: 260px; top: 320px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 260px; top: 320px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 400px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 400px;"></div>
<div class="blipping blip" style="margin-left: 400px; top: 350px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 400px; top: 350px;"></div>
<div class="blipping blip" style="margin-left: 380px; top: 30px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 380px; top: 30px;"></div>
<div class="blipping blip" style="margin-left: 170px; top: 200px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 170px; top: 200px;"></div>
<div class="blipping blip" style="margin-left: 420px; top: 120px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 420px; top: 120px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 170px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 170px;"></div>
<div class="blipping blip" style="margin-left: 350px; top: 210px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 350px; top: 210px;"></div>
<div class="blipping blip" style="margin-left: 220px; top: 240px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 220px; top: 240px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 40px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 40px;"></div>
</div>
</div>

Answer 1

我们可以通过针对该类的所有元素来实现这一点。

你迭代它们并使用下一个函数来获取一个介于 1 和 2 之间的随机数;

Math.random() * (2 - 1) + 1

JS函数：

let blips = document.getElementsByClassName('blip');
for(let i =0; i<blips.length; i++){
blips[i].style.animationDelay = (Math.random() * (2 - 1) + 1)+"s";
}

希望这有帮助：>

let blips = document.getElementsByClassName('blip');
for(let i =0; i<blips.length; i=i+2){
let delay =  (Math.random() * (2 - 1) + 1);
blips[i].style.animationDelay =delay+"s";
blips[i+1].style.animationDelay =(delay+1.6)+"s";
}

.table {
width: 600px;
height: 450px;
background: url('https://i.imgur.com/6QPG66E.jpg');
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
background-color: #133342;
border: solid 3px rgba(127, 222, 254, 0.2);
border-radius: 15px;
transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
margin-top: 200px;
opacity: 0.8;
margin-left: 15%;
overflow: hidden;
}
#radarline {
background: -webkit-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
background: -o-linear-gradient(left, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
background: linear-gradient(to right, rgba(29, 185, 224, 0) 1%, rgba(29, 185, 224, 0) 25%, rgba(29, 185, 224, 0.8) 50%, rgba(29, 185, 224, 0) 75%, rgba(29, 185, 224, 0) 100%);
/* FF3.6-15 */
/* Chrome10-25,Safari5.1-6 */
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001db9e0', endColorstr='#001db9e0', GradientType=1);
/* IE6-9 */
width: 30px;
height: 1400px;
transform: rotateX(70deg) rotateZ(0deg) rotateY(0deg) !important;
margin-top: -475px;
margin-left: 0;
animation-name: radarline;
animation-duration: 7s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes radarline {
from {
margin-left: -30px;
}
to {
margin-left: 630px;
}
}
.blip {
margin: 0 0;
position: absolute;
border-radius: 50%;
background-color: rgba(0, 211, 255, 1.00);
opacity: 1;
width: 25px;
height: 25px;
}
.blipping {
border-radius: 50%;
-webkit-animation: scaleUp 2.3s infinite linear;
animation: scaleUp 2.3s infinite linear;
}
.delayedBlip {
-webkit-animation-delay: -1.6s;
animation-delay: -1.6s;
}
@keyframes scaleUp {
0% {
opacity: 1;
transform: scale(0);
}
40% {
opacity: 0.5;
transform: scale(0.5);
}
100% {
opacity: 0;
transform: scale(1.0);
}
}
@-moz-keyframes scaleUp {
0% {
opacity: 1;
-moz-transform: scale(0);
}
40% {
opacity: 0.5;
-moz-transform: scale(0.5);
}
100% {
opacity: 0;
-moz-transform: scale(1.0);
}
}
@-webkit-keyframes scaleUp {
0% {
opacity: 1;
-webkit-transform: scale(0);
}
40% {
opacity: 0.5;
-webkit-transform: scale(0.5);
}
100% {
opacity: 0;
-webkit-transform: scale(1.0);
}
}

<div class="table">
<div id="radarline"></div>
<div class="blips">
<div class="blipping blip" style="margin-left: 300px; top: 300px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 300px; top: 300px;"></div>
<div class="blipping blip" style="margin-left: 200px; top: 100px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 200px; top: 100px;"></div>
<div class="blipping blip" style="margin-left: 100px; top: 30px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 100px; top: 30px;"></div>
<div class="blipping blip" style="margin-left: 400px; top: 250px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 400px; top: 250px;"></div>
<div class="blipping blip" style="margin-left: 120px; top: 280px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 120px; top: 280px;"></div>
<div class="blipping blip" style="margin-left: 260px; top: 320px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 260px; top: 320px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 400px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 400px;"></div>
<div class="blipping blip" style="margin-left: 400px; top: 350px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 400px; top: 350px;"></div>
<div class="blipping blip" style="margin-left: 380px; top: 30px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 380px; top: 30px;"></div>
<div class="blipping blip" style="margin-left: 170px; top: 200px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 170px; top: 200px;"></div>
<div class="blipping blip" style="margin-left: 420px; top: 120px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 420px; top: 120px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 170px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 170px;"></div>
<div class="blipping blip" style="margin-left: 350px; top: 210px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 350px; top: 210px;"></div>
<div class="blipping blip" style="margin-left: 220px; top: 240px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 220px; top: 240px;"></div>
<div class="blipping blip" style="margin-left: 280px; top: 40px;"></div>
<div class="blipping blip delayedBlip" style="margin-left: 280px; top: 40px;"></div>
</div>
</div>