Forward Animation Example

by bowheart

HTML

<div></div><div></div><div></div><div></div><div></div><div></div><div></div>

SCSS

body { margin: 0; }
@keyframes slideRight {
	100% { margin-left: 100px; }
}

div {
	animation: slideRight 0.4s forwards linear;
	background: #48e;
	margin: 10px;
	margin-left: 10px;
	height: 50px;
	width: 50px;
	
	&:nth-child(2) {
		animation-delay: 0.2s;
	}
	&:nth-child(3) {
		animation-delay: 0.4s;
	}
	&:nth-child(4) {
		animation-delay: 0.6s;
	}
	&:nth-child(5) {
		animation-delay: 0.8s;
	}
	&:nth-child(6) {
		animation-delay: 1s;
	}
	&:nth-child(7) {
		animation-delay: 1.2s;
	}
}