Código :
<html id='H'><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false">
<script>
var O=document.createElement('div');
var b=document.getElementById('b');
O.textContent='hola mundo';O.style.position='absolute';O.style.top='100px';O.style.left='100px';
b.appendChild(O);
O.animate([{transform:'rotate(0deg)'},{transform:'rotate(360deg)'}],{duration:1000,iterations:Infinity});
</script>
</html>
que por lo visto esto es imparable a menos que hagamos un O.remove(), la unica manera de solucionarlo para controlar es acotar a 1 las iteraciones y volver a repetir la funcion recursivamente para ello tuve que crear el siguiente prototype:
Código :
<html id='H'><head id="h"><meta charset="utf-8"></head><body id="b" spellcheck="false">
<script>
Object.prototype.animacio=function(...a){var I=this;
if(I.animacio.disabled==null){I.animacio.disabled=false;}else{if(I.animacio.disabled==true){I.animacio.disabled=false};};
function A(){I.animate([{transform:a[0]},{transform:a[1]}],{duration:a[2],iterations:1});if(!this.animacio.disabled){setTimeout(A,a[2]);}else{return false;};};
if(!this.animacio.disabled){A();}
}
var O=document.createElement('div');
var b=document.getElementById('b');
O.textContent='hola mundo';
O.style.position='absolute';O.style.top='100px';O.style.left='100px';O.style.cursor='pointer';
b.appendChild(O);
O.onclick=function(){O.animacio('rotate(0deg)','rotate(360deg)',400);}
window.ondblclick=function(){O.animacio.disabled=true;O.style.transform='rotate(360deg)';}
</script>
</html>
Sin embargo el problema que tiene esto es que logicamente cuando hacemos dobleclick el objetoElemento necesita recorrer 360 grados para parar.
