CSS transition after animation

dabblet.css

/**
 * CSS transition after animation 
 */
div {
	transition: transform 1s;
}
div:hover {
	transform: rotate(45deg);
}
div:active {
	animation: rotate 3s infinite;
}
@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}


/*demo styles*/
div {
	transition: transform 1s;

	height: 100px;
	width: 100px;
	margin: auto;
	background: red;
	border-top-right-radius: 100%;
}

dabblet.html

<div></div>
<p>Hover on shape: it <strong>transitions</strong> into a 45deg rotation.
<p>Click and hold: it starts rotating (<code>animation</code>).
<p>Release click: it <strong>jumps</strong> back to 45deg rather than <strong>transitioning</strong> back to it, even if <code>transition</code> is set.
<p>In your <a href="http://lab.simurai.com/icons/" target="_blank">demo</a>, the arrow on the cloud seems to always <strong>ease</strong> back into its original position rather than jumping into it. <strong>How did you manage to do that?</strong> I tried understanding your code but I didn't find anything different than what I do.

settings.json

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