Move in a circle or arc without wrapper elements

dabblet.css

/**
 * Move in a circle without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

@keyframes rot {
	from {
		transform: rotate(0deg)
		           translate(-150px)
		           rotate(0deg);
	}
	to {
		transform: rotate(360deg)
		           translate(-150px) 
		           rotate(-360deg);
	}
}

.smile {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 200px;
	left: 50%;
	margin: -20px;
	font-size: 100px;
	animation: 3s rot infinite linear;
}

/**
 * Move in an arc without wrapper elements
 * Idea by Aryeh Gregor, simplified by Lea Verou
 */

@keyframes arc {
	from {
		transform: rotate(360deg)
		           translate(150px)
		           rotate(-360deg);
	}
	to {
		transform: rotate(180deg)
		           translate(150px) 
		           rotate(-180deg);
	}
}

.frown {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 500px;
	left: 50%;
	margin: -20px;
	font-size: 100px;
	animation: 3s arc infinite linear;
}

dabblet.html

<div class="smile">☺</div>
<div class="frown">☹</div>

settings.json

{"view":"separate","prefixfree":"1","page":"result"}