1, 2, 3, Action!

dabblet.css

/**
 * 1, 2, 3, Action!
 */

@keyframes one
{
	from { opacity: 0 }
	19%  { opacity: 0 }
	21%  { opacity: 1 }
	39%  { opacity: 1 }
	41%  { opacity: 0 }
	to   { opacity: 0 }
}

@keyframes two
{
	from { opacity: 0 }
	39%  { opacity: 0 }
	41%  { opacity: 1 }
	59%  { opacity: 1 }
	61%  { opacity: 0 }
	to   { opacity: 0 }
}

@keyframes three
{
	from { opacity: 0 }
	59%  { opacity: 0 }
	61%  { opacity: 1 }
	79%  { opacity: 1 }
	81%  { opacity: 0 }	
	to   { opacity: 0 }
}

@keyframes action
{
	from { opacity: 0 }
	79%  { opacity: 0 }
	81%  { opacity: 1 }	
	to   { opacity: 1 }
}

div
{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -0.5em;
	text-align: center;
	font: bold 10em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: both;
}

#one	{ animation-name: one }
#two	{ animation-name: two }
#three	{ animation-name: three }
#action	{ animation-name: action }

dabblet.html

<div id="one">1</div>
<div id="two">2</div>
<div id="three">3</div>
<div id="action">Action!</div>

dabblet.js

// alert('Hello world!');

settings.json

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