Выделите случайные задержки анимации для каждого элемента класса

Question

У меня есть куча радарных всплесков, которые я создал и поместил на «карту». На данный момент все они появляются одновременно. Мне было интересно, есть ли способ дать им все индивидуальные animation-delay, сохраняя при этом задержку анимации 1,6 секунды на .delayedBlip.

Чтобы уточнить, я хочу, чтобы каждому элементу с именем класса .blip было присвоено animation-delay случайной длительности 1-2 с. После этого мне нужно, чтобы его брат .delayedBlip задержался на 1,6 секунды после анимации blip.

Соответствующий код ниже:

.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>