애니메니션 : div가 div안에서 이동

<h2>애니메이션 컨테이너 만들기</h2>

  <p><button onclick="myMove()">나를 클릭하세요.</button></p>

  <div id="container">

    <div id="animate">b</div>

 </div>

 <style>

    #container{

        width: 400px;

        height: 400px;

        position: relative;          

        background: yellow;

    }

    #animate{

        width:50px;

        height: 50px;

        position: absolute;

        background: red;

    }

</style>

    <script>

        function myMove(){

            let id=null;

            const elem=document.getElementById("animate");

            let pos = 0;

            clearInterval(id);

            id = setInterval(frame,5);

            function frame(){

                if(pos==350){

                    clearInterval(id);

                }else{

                    pos++;

                    elem.style.top=pos+"px";

                    elem.style.left=pos+"px";

                }

            }

        }

       

    </script>