Delayed Animations

dabblet.css

/**
 * Delayed Animations
 */
@keyframes fadeToBlue {
	50% { 
		background: blue 
	}
}

.foo { 
	float: left; 
	margin: 0 1px; 
	width: 100px; 
	height: 100px 
}

.foo:nth-child(1) { 
	animation: fadeToBlue 1.5s 1.0s ease 1; 
	background: red 
}
.foo:nth-child(2) { 
	animation: fadeToBlue 1.5s 1.2s ease 1; 
	background: green 
}
.foo:nth-child(3) { 
	animation: fadeToBlue 1.5s 1.4s ease 1; 
	background: orange 
}
.foo:nth-child(4) { 
	animation: fadeToBlue 1.5s 1.6s ease 1; 
	background: silver 
}
.foo:nth-child(5) { 
	animation: fadeToBlue 1.5s 1.8s ease 1; 
	background: maroon 
}
.foo:nth-child(6) { 
	animation: fadeToBlue 1.5s 2.0s ease 1; 
	background: olive 
}​​​​​​​​​​​​​​​​​​​​​​​

dabblet.html

​<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>​

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}