- @n = 2
.container
  - @n.times do
    .unit
      .ball
      .ball-shadow
.overlay
View Compiled
@import "compass/css3";
$lt-grey: #666;

html {
  background: #222;
}

.container {
  width: 500px;
  margin: 10px auto;
  border: 1px solid #333;
  height: 280px;
  background: #111;
  overflow: hidden;
}

.unit {
  float:left;
  width: 249px;
  height: 280px;
  background-color: #222426; // Old browsers
  @include filter-gradient(#222426, #111111, horizontal); // IE6-9 fallback on horizontal gradient
  @include background-image(radial-gradient(center, ellipse cover, #222426 0%,#111111 100%));
  &:first-child { 
    border-right: 1px solid #333; 
  }
}

.overlay {
  position: absolute;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grain.png");
  top: 10px;
  width: 500px;
  height: 280px;
  left: 50%;
  margin-left: -250px;
  z-index: 1000;
  opacity: 0.11;
  animation: filmgrain 0.4s steps(3) infinite;
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid $lt-grey;
  transform: translateZ(0);
  margin: 30px auto;
  position: relative;
  z-index: 300;
}

.ball-shadow {
  position: absolute;
  width: 50px;
  height: 5px;
  border-radius: 50%;
  background: #000;
  top: 280px;
  margin-left: 100px;
  z-index: 2;
  opacity: 0;
  box-shadow: 0 0 10px 5px rgba(0,0,0,0.2);
  animation: boom 2s 1s ease-in-out infinite;
}

.unit:nth-child(1) .ball {
  animation: borderdo 0.2s linear infinite;
}

.unit:nth-child(2) .ball {
  animation: borderdo 0.2s linear infinite;
}

@keyframes boom {
  50% { opacity: 0.8; }
}

@keyframes filmgrain {
  100% { background-position: 200% 0%; }
}

@keyframes borderdo {
  40% { border: 1px solid $lt-grey; }
  50% { border: none; }
  40% { border: 1px solid $lt-grey; }
}
View Compiled
var $ball1 = $(".unit").eq(0).find(".ball"),
  $ball2 = $(".unit").eq(1).find(".ball");

TweenMax.from($ball1, 0.8, {
  y: 220,
  repeat: -1,
  yoyo: true,
  ease: Power4.easeOut
});
TweenMax.from($ball2, 0.8, {
  y: 225,
  repeat: -1,
  yoyo: true,
  ease: Circ.easeOut
});
TweenMax.fromTo($ball2, 0.8, {
  scaleY: 1
}, {
  scaleY: 1.05,
  repeat: -1,
  yoyo: true,
  ease: Back.easeOut
});
TweenMax.fromTo($ball2, 0.8, {
  scaleX: 1.2
}, {
  scaleX: 0.95,
  repeat: -1,
  yoyo: true,
  ease: Power4.easeOut
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js