html { background-color:#111; }

.wrapper {
  position:relative;
  height:100px; width:100%;
  overflow:hidden;
}

.movingsection { 
	position:absolute;
	animation:slide 1s infinite linear;
}
 

.bauble {
	float:left;  
	margin-left:-10px;
	transform-origin:50% 100%;
	$border-color:#eee;
	border-left:10px solid $border-color;
	border-top:10px solid $border-color;
	border-right:10px solid $border-color;   
	height:100px; width:200px;
	border-radius:200px 200px 0 0;   
	&.final {
		animation:rotate 1s infinite linear;
	}
}

@keyframes slide {
  from { margin-left:0; }  
  to   { margin-left:-210px; }
} 

@keyframes rotate {
  from { transform:rotate(180deg); }
  to   { transform:rotate(360deg); }
}