<div class="box"><b></b></div>
.box{
  background-color: #006699;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  box-shadow: inset 0 0 20px #155;
  border-radius: 20px;
  border: 1px solid #111;
  overflow: hidden;
}

.box b {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #999999;
  box-shadow: inset -5px -5px 5px rgba(0,0,0,.6), 15px 15px 2px rgba(0,0,0,.04);
  position: absolute;
  -webkit-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -moz-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  -o-animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
  animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.