需要DIV从区域内的随机位置开始

Question

我编码了一盒萤火虫（div），它们围绕着块的限制而反弹。这不使用js，我试图随机化每个DIV在页面加载时开始的位置。因此，每次刷新页面时，起始位置都是随机的。现在他们从同一个地方开始。

我尝试了很多动画（），但我无法让它发挥作用。

任何帮助将不胜感激。这是我到目前为止所拥有的。 http://jsfiddle.net/jimdimeo/0eL93zzt/

CSS:

$n: 16; 
$m: 8;

@keyframes random-animation {
  @for $i from 0 through $n {
    #{$i * 100% / $n} {
      @include transform(
        scale(random($n / $m) + 1.5)
        rotate(random(360) + deg)
        translate(random($n * 3 / $m) + em)
      );
    }
  }
}

body { background: #222; }
.box {
  background-color: #B7B2B2;
  margin: 0 auto;
  width: 200px;
  height: 150px;
  position: relative;
  box-shadow: inset 0 0 3px #000;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}

.box b {
    padding-top: random(5) + em;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation-delay: -30s;
}
.box b1 {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  -moz-animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  -o-animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite alternate;
  animation-delay: -5s;
}
.box b2 {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
  -moz-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
  -o-animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
  animation: moveX 1.05s linear 0s infinite alternate, moveY 1.4s linear 0s infinite alternate;
  animation-delay: -15ms;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 140px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 140px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 140px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 140px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 90px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 90px; }
}