@import "compass/css3"; // Sass Mixins // Animation Mixin @mixin animate($animation, $duration, $repeat, $easing) { -webkit-animation: $animation $duration $repeat $easing; -moz-animation: $animation $duration $repeat $easing; -ms-animation: $animation $duration $repeat $easing; animation: $animation $duration $repeat $easing; } // Keyframes Mixin // https://gist.github.com/ericam/1607696 @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } // Main Styles html, body { height: 100%; } body { background: #09f; @include background-image(linear-gradient(bottom, #09f, #45d1ff)); } .bubble-toggle { position: absolute; top: 10px; right: 10px; padding: 10px; background: rgba(255,255,255,0.5); font-family: sans-serif; font-size: 13px; color: #333; &:hover { background: rgba(255,255,255,0.75); } } // Bubble Styles .bubbles { position: relative; overflow: hidden; width: 100%; height: 100%; margin: 0 auto; } .bubble-container { position: absolute; bottom: 0; @include animate(bubblerise, 4s, infinite, ease-in); @include opacity(0); } .bubble { width: 6px; height: 6px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.25); @include border-radius(10px); @include animate(bubblewobble, 0.4s, infinite, linear); } // Keyframe Animations @include keyframes(bubblerise) { 0% { bottom: 0; @include opacity(0); } 5% { bottom: 0; @include opacity(1); } 99% { @include opacity(1); } 100% { bottom: 100%; @include opacity(0); } } @include keyframes(bubblewobble) { 0% { margin-left: 0; } 50% { margin-left: 2px; } }