Анимация в HTML CSS

var count=0;
    var rotation = 0;
     
    jQuery.fn.rotate = function(degrees) {
        $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
        return $(this);
    };
    function append(){
      $("div").append("<img  class=rot id=btn4 src =222.jpg />");
      $("div").append("<img  class=rot id=btn5 src =music-note.jpeg />")
      $("div").append("<img  class=rot id=btn6 src =3.jpg />")
      $("div").append("<img  class=rot id=btn7 src =45.jpg />")
    }
    function rot(x){
      $("#btn").animate(
        { deg: x},
        {
          duration: 400,
          step: function(now) {
            $(this).css({ transform: 'rotate(' + now + 'deg)' });
          }
        }
      );
    }
    function rot1(x){
      $(".rot").animate(
        { deg: x},
        {
          duration: 30,
          step: function(now) {
            $(this).css({ transform: 'rotate(' + now + 'deg)' });
          }
        }
      );
    }

    function rem(){
      $('#btn1').remove();
      $('#btn2').remove();
      $('#btn3').remove();
      $('#btn8').remove(); 
    }
    function append1(){
      $('#btn4').remove();
      $('#btn5').remove();
      $('#btn6').remove();
      $('#btn7').remove();
      $("div").append("<img class=remove id=btn1 src=456.jpg />");
      $("div").append("<img class=remove id=btn2 src=78.jpg />");
      $("div").append("<img class=remove id=btn3 src=9.jpg />");
      $("div").append("<img class=remove id=btn8 src=download.jpg />");

    }
     function play(){
      if (count==0){
        rot(135);
      myMove(500,10);
    rem();

      //$("p").remove(".test");
      append();
      rot1(360);
      myMove3(500,0.05);

      //$("#btn").animate({top:"+=40"}, 0.000005);
      count++;
      }
      else if (count==1){
        rot(-360);
        $("#btn").animate({top: "-=20"}, 0.000005);
      append1();
        myMove1(500,5);
        myMove2(450,5);
         count=0;
      }
     
     }
     //Mymove(500,)
      function myMove(x,y) {
      var elem = document.getElementById("btn");   
      var pos = x;
      var id = setInterval(frame, y);
      function frame() {
        if (pos == 520) {
          clearInterval(id);
        } else {
          pos++; 
          elem.style.top= pos + "px"; 
         // elem.style.left = pos + "px"; 
        }
      }
      }
      function myMove1(x,y) {
      var elem = document.getElementById("btn");   
      var pos = x;
      var id = setInterval(frame, y);
      function frame() {
        if (pos == 450) {
          clearInterval(id);
        } else {
          pos--; 
          elem.style.top = pos + "px"; 
         // elem.style.left = pos + "px"; 
        }
      }
      }
      function myMove2(x,y) {
      var elem = document.getElementById("btn");   
      var pos = x;
      var id = setInterval(frame, y);
      function frame() {
        if (pos == 500) {
          clearInterval(id);
        } else {
          pos++; 
          elem.style.top = pos + "px"; 
         // elem.style.left = pos + "px"; 
        }
      }
      }
      function myMove3(x,y) {
      var elem1 = document.getElementById("btn4");
      var elem2=document.getElementById("btn5");
      var elem3=document.getElementById("btn6");
      var elem4=   document.getElementById("btn7");
      var pos = x;
      var id = setInterval(frame, y);
      function frame() {
        if (pos ==450) {
          clearInterval(id);
        } else {
          pos--; 
          elem1.style.top= pos + "px";
          elem2.style.top= pos + "px";
          elem3.style.top= pos + "px";
          elem4.style.top= pos + "px"; 
         // elem.style.left = pos + "px"; 
        }
      }
      }

#btn{
    position: absolute;
  bottom: 81px;
  right:620px;
  width:7%;
}
#btn1{
    position: absolute;
  bottom: 0px;
  right:400px;
  width:10%;
}
#btn2{
    position: absolute;
  bottom: 10px;
  right:300px;
  width:8%;

}
#btn3{
    position: absolute;
  bottom: 30px;
  right:820px;
  width:5%;

}
#btn4{
  position: absolute;
  top: 500px;
  right:500px;
  width:4%;
}
#btn5{
  position: absolute;
  top: 510px;
  right:350px;
  width:5%;

}
#btn6{
  position: absolute;
  top: 495px;
  right:820px;
  width:5%;
}
#btn7{
  position: absolute;
  top: 510px;
  right:970px;
  width:5%;
}
#btn8{
    position: absolute;
  bottom: 25px;
  right:950px;
  width:5%;

}

#line{
    position: absolute;
  bottom: 5px;
  right:530px;
  width:20%;

}
input:focus {
    outline: none;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>