/**
 * 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);
		color: red;
	}
	to {
		transform: rotate(360deg)
		           translate(-150px)
		           rotate(-360deg);
		color: blue;
	}
}

.carousel {
   border: 1px dashed black;
   width: 90%;
   line-height: 90%;
}

.carousel > div {
	width: 100px;
	height: 100px;
	font-size: 100px;
	display: inline-block;
	position: absolute;
	top: 150px;
	margin: -20px;
}

.smile1 {
	left: 50%;
	animation: 3s rot infinite linear;

}
.smile2 {
	left: 40%;
	animation: 2s rot infinite linear;

}