Play/Pause GIF on Hover

HTML

<div id="faux-gif"></div>

CSS

#faux-gif {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background-image: url(http://i.imgur.com/E2ee6fI.gif);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	width: 300px;
	height: 300px;
	animation: giffy 0.5s infinite steps(1);
    animation-play-state: running;
}
#faux-gif:onclick {
	animation-play-state:paused;
}

@keyframes giffy {
	0%   { background-image: url('http://i.imgur.com/E2ee6fI.gif'); } 
	15%  { background-image: url('http://i.imgur.com/JIi0uul.gif'); }
	30%  { background-image: url('http://i.imgur.com/owNGnNN.gif');}
	45%  { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }
	60%  { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }
	75%  { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }
	90%  { background-image: url('http://i.imgur.com/AJwRblj.gif'); }
	100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }
}