The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

#warpper {
	height: 200px;
	width: 200px;
	background: red;
	position: relative;
}

#spin {
	position: absolute;
	background: blue;
	height: 30px;
	width: 15px;
	top: 100px;
	left: 100px;
	
	animation-duration: 2s;
	animation-name: spin;
	animation-iteration-count: infinite;;
}

@keyframes spin {
	0% { margin-top: 0px }
	50% { margin-top: -30px }
	100% { margin-top: 0px; }
}

@keyframes last-spin {
	to { margin-top: 0px }
}

#warpper:hover #spin {
	animation-name: last-spin !important;
	animation-iteration-count: 1;
}

#spin #note {
	background-color: white;
	position: absolute;
	width: 90px;
	top: -30px;
	left: -40px;
	display: none;
}

#spin:hover #note {
	display: block;
}

dabblet.html

<div id="warpper">
	<div id="spin">
		<div id="note">Important, ok?</div>
	</div>
</div>

settings.json

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