licson · May 3, 2013 14:53
diff --git a/dabblet.css b/dabblet.css
 /**
 * The first commented line is your dabblet’s title
 */

 @keyframes animation {
    from {
        transform: translateX(0px);
    }
    60% {
        transform: translateX(82px);
    }
    to {
        transform: translateX(0px);
    }
 }

 #box {
 	width: 25%;
 	height: 5em;
 	background: #ff9900;
 	animation: animation 2s infinite;
 	margin: auto;
 }
diff --git a/dabblet.html b/dabblet.html
 <!-- content to be placed inside <body>…</body> -->
 <h1>CSS animations - example #1</h1>
 <div id="box"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* The first commented line is your dabblet’s title
	*/

	@keyframes animation {
	from {
	transform: translateX(0px);
	}
	60% {
	transform: translateX(82px);
	}
	to {
	transform: translateX(0px);
	}
	}

	#box {
	width: 25%;
	height: 5em;
	background: #ff9900;
	animation: animation 2s infinite;
	margin: auto;
	}
	<!-- content to be placed inside <body>…</body> -->
	<h1>CSS animations - example #1</h1>
	<div id="box"></div>