Untitled

dabblet.css

.me {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #55F;
  border-radius: 15px;
  border: 3px solid #FFF;
  box-shadow: 0px 0px 10px #AAA, inset 0px 0px 10px #33C;
  
  left: 200px;
  top: 200px;
  animation-name: float;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

.more {
  position: absolute;
  animation-name: float-y;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out
}

@keyframes float {
  0% { margin-left: 0px; }
  50% { margin-left: -2px; }
  100% { margin-left: 0px; }
}

@keyframes float-y {
  0% { margin-top: 0px; }
  50% { margin-top: 2px; }
  100% { margin-top: 0px; }
}

dabblet.html

<div class="more">
  <div class="me"></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}