Untitled

dabblet.css

body {
background: url(http://farm3.static.flickr.com/2320/2119636183_cc84ba6efc_b.jpg) top no-repeat;
background-size:cover;
}
@keyframes moon {
	from { transform:rotate(00deg); color:#c0c0c0; }
	50% { transform: translateY(-520px); }
	to { transform: translateX(320px);}
}

.moon {
	animation: 250s moon infinite;
	height:100px;
	width:100px;
	border-radius: 50%;
	margin:auto;
	margin-top: 350px;
	background: url(http://i.imgur.com/lPyvooi.png) center no-repeat;
}
@keyframes ball1 {
	from { transform:rotate(00deg); color:#c0c0c0;  }
	30% { left: 100px; transform:translateY(100px); }
	50% { l: 1px; transform:translateY(20px); }
	to { transform:rotate(00deg); color:#c0c0c0; }
}

.ball1 {
	float:left;
	animation: 55.5s ball1 infinite;
	height:5px;
	width:5px;
	border-radius: 50%;
	margin:auto;
	top: 50px;
	position:absolute;
	margin-left:15px;
	background: #fff;
	
}

dabblet.html

<div class="moon"></div>
<div class="ball1"></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"130","seethrough":"","prefixfree":"1","page":"css"}