After experimenting with numerous CSS snippets, I found that none fulfill all my requirements.
Here's what I'm aiming to achieve within the function myspin(x){}:
1.) Rotate image x degrees invisibly on click
2.) Then smoothly animate a spin of 800 degrees visible
3.) End with a slow ease out effect
4.) Reset all necessary properties for reusability upon the next button click
function myspin() {
var x = 800;
document.getElementById("arrowid2").style.transform = "rotate(" + x + "deg)";
document.getElementById("arrowid2").style.animation = "arrowspin 2s ease-out 1 normal";
}#arrowid2 {
position: absolute;
top: 100px;
left: 100px;
-webkit-transition: -webkit-transform 2s ease-out;
}<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<input type="button" value="click" onclick="myspin();" />
<br/>
<br/>
<br/>
<img id="arrowid2" src="arrow001.png" alt="" border="0" width="87" height="306">
</body>