將隨機動畫延遲分配給類的每個元素

Question

我創建了很多雷達信號，並將其放在“地圖”上。 目前，它們都同時出現。 我想知道是否有辦法給他們所有單獨的animation-delay同時仍保留.delayedBlip上的1.6秒動畫延遲。

詳細地說，我希望每個具有類名.blip元素都具有分配給它的1-2s隨機持續時間的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>