Skip to content

Instantly share code, notes, and snippets.

@nladart
Created March 18, 2013 17:02
Show Gist options
  • Save nladart/5188812 to your computer and use it in GitHub Desktop.
Save nladart/5188812 to your computer and use it in GitHub Desktop.
Looping signal animation
.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
@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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment