HTML/CSS - CSS keyframes issue Online Editor and JavaScript Compiler

html
<script>
Spawn=function(){
    Child=document.createElement("div");
    Child.innerHTML='<div style="animation:ranch1 .5s infinite;position:absolute;width:50px;height:50px;border-radius:50%;font-size:50px;top:'+(296*Math.random()|0)+'px;left:'+(296*Math.random()|0)+'px">🐥</div>';
    Arena.appendChild(Child)
}
</script>
<div id=Arena style="position:absolute;width:344px;height:344px;background:#bbb;top:40px;left:5px">
    touch the egg<br>
    <br>remove the css animation keyframes from the appended child element in the Spawn() function<br><br>
    touch the egg again<br><br>
    Why is the outcome different?<br><br>
    What should I do to have the second outcome without removing the keyframes?
    <br><br>by the outcome I mean the behavior of the egg button, the progress bar effect.
</div>
    <button onclick="Spawn();this.children[0].style.display='block';this.disabled=true;a=0;b=this;c=setInterval(function(){a--;b.children[0].style.top=a+'%';if(a==-100){clearInterval(c);a=0;b.children[0].style.display='none';b.children[0].style.top='0%';b.disabled=false}},50)" style="position:absolute;top:390px;border:none;outline:none;width:70px;height:70px;border-radius:50%;overflow:hidden;font-size:60px">
        <div style="display:none;opacity:.5;top:0%;left:0px;position:absolute;width:100%;height:100%;background:#222"></div>🐣
    </button>
<style>
@keyframes ranch1{
    0%{transform:translateY(0px);}
    50%{transform:translateY(-5px);}
    100%{transform:translateY(0px);}
}
</style>
css
BROWSER
Console