.size{
	width:200px;
	height:50px;
}
.parent1{
	margin:10px;
	padding:10px;
	border:1px solid #ccc;

	.child{
		position:relative;
		background-color:#0f0;
		animation-name:kf-child1;
		animation-duration:2s;
		animation-iteration-count:infinite;
	}
}

@keyframes kf-child1 {
	0% {
		opacity:0;
		left:0;
	}
	100% {
		opacity:1;
		left:50px;
	}
}

.parent2{
	margin:10px;
	padding:10px;
	border:1px solid #ccc;

	.child{
		position:relative;
		background-color:#00f;
		animation-name:kf-child2;
		animation-duration:2s;
		animation-iteration-count:infinite;
	}
}

@keyframes kf-child2 {
	0% {
		opacity:1;
		left:100px;
	}
	100% {
		opacity:0;
		left:0;
	}
}