Animation on hover

Keeps the last animated frame as the animation is finished.

by thelifeisyours

HTML

<div id="block"></div>

CSS

#block {
	width:10em;
	height:10em;
	background:blue;
  animation-duration: .3s;
	animation-iteration-count:1;
  animation-name: block;
	animation-fill-mode: both;
	animation-play-state: paused;  
}

#block:hover {
	 animation-play-state: running;  
}

@keyframes block{
	0% {
		width:10em;
		height:10em;
	}
	
	100% {
		width:20em;
		height:20em;
	}
}