Smooth state animations

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;
}

dabblet.html

<div class="panoramic"></div>

dabblet.js

// alert('Hello world!');

settings.json

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