Looping signal animation

index.haml

.container
  .signals
    %span.signal-1
    %span.signal-2
    %span.signal-3
    %span.signal-4
    %span.signal-5
    %span.signal-6
    %span.signal-7
    %span.signal-8

style.sass

@import "compass"
.container
  position: relative
  width: 100%

.signals
  position: absolute
  top: -30px
  right: 0
  bottom: 0
  left: -4px
  opacity: .6

  span
    display: block
    position: absolute
    left: 50%
    border: 2px solid #74bbdc
    +opacity(0)
    +border-radius(100%)
    +box-shadow(0 0 80px #a8e3ff)
    -webkit-animation: signal 2.4s infinite alternate ease-in-out
    -moz-animation: signal 2.4s infinite alternate ease-in-out

  $signals: 8
  $signal-size: 50px
  $signal-increment: 20px
  $signal-delay: 0s

  @while $signals > 0
    .signal-#{$signals}

      $size: $signal-size + ($signals * $signals * $signal-increment)

      width: $size
      height: $size
      margin-top: - ($size / 2)
      margin-left: - ($size / 2)
      border-color: rgba(116,187,220,(1 - ($signals * .10)))
      +box-shadow(0 0 80px rgba(107,208,255,(1 - ($signals * .10))))
      -webkit-animation-delay: $signal-delay + ($signals * .3)
      -moz-animation-delay: $signal-delay + ($signals * .3)
    $signals: $signals - 1

@-webkit-keyframes signal
  0%
    +opacity(0)

  100%
    +opacity(1)

@-moz-keyframes signal
  0%
    +opacity(0)

  100%
    +opacity(1)