csssecrets · October 6, 2014 09:35
diff --git a/dabblet.css b/dabblet.css
 /**
 * Smooth state animations
 * Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709
 */

 @keyframes panoramic {
 	to { background-position: 100% 0; }
 }

 .panoramic {
 	width: 150px; height: 150px;
 	background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
 	background-size: auto 100%;	
 	animation: panoramic 10s linear infinite alternate;
 	animation-play-state: paused;
 }

 .panoramic:hover, .panoramic:focus {
 	animation-play-state: running;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="panoramic"></div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Smooth state animations
	* Photo credits: https://www.flickr.com/photos/employtheskinnyboy/3904743709
	*/

	@keyframes panoramic {
	to { background-position: 100% 0; }
	}

	.panoramic {
	width: 150px; height: 150px;
	background: url('http://c3.staticflickr.com/3/2671/3904743709_74bc76d5ac_b.jpg');
	background-size: auto 100%;
	animation: panoramic 10s linear infinite alternate;
	animation-play-state: paused;
	}

	.panoramic:hover, .panoramic:focus {
	animation-play-state: running;
	}