Есть ли способ позиционирования или перемещения javascript анимации?

Question

Я пишу это, чтобы обсудить, как переместить анимацию формы пузыря вверх.

То, что я ожидал : заставить анимацию пузыря двигаться снизу вверх (название Ахранг Ким.)

Как это ведет себя в настоящее время : Немного всплывает, затем исчезает и исчезает

То, что я пробовал :

1. Изменено число var start & var end> ​​hasn ' t сделать разницу

2. Изменен номер источника трансформации. $("body").prepend("<style>.shape_background {transform-origin: **20% 80%**; width:80px; height:80px; background: "+$this.style.bubbles_color+"; position: relative}</style>");> не имеет значения

3. В HTML я изменил порядок javascript ссылка прямо под заголовком> не имеет значения

4. В CSS я переместил блок кода background_css3 вверху> не имеет значения

5. Сделано <div class="background_css3"> в html и изменил размер или изменить положение с помощью css> не вносить изменений

Вот существующий код:

$(document).ready(function(){
            
            
        
        
          var background = {}
  
            background.initializr = function (){
    
            var $this = this;
     

   
    //option
    $this.id = "background_css3";
    $this.style = {bubbles_color:"#d3d3d3",stroke_width:0, stroke_color :"black"};
    $this.bubbles_number = 30;
    $this.speed = [1500,8000]; //milliseconds
    $this.max_bubbles_height = $this.height;
    $this.shape = false // 1 : circle | 2 : triangle | 3 : rect | false :random
    
    if($("#"+$this.id).length > 0){
      $("#"+$this.id).remove();
    }
    $this.object = $("<div style='z-index:-1; background-size: cover; position:relative; height: 100vh; ' id='"+$this.id+"'> </div>'").appendTo("body");
    
    $this.ww = $(window).width()
    $this.wh = $(window).height()
    $this.width = $this.object.width($this.ww);
    $this.height = $this.object.height($this.wh);
    
    
    $("body").prepend("<style>.shape_background {transform-origin:2; width:80px; height:80px; background: "+$this.style.bubbles_color+"; position: relative}</style>");
    
    
    for (i = 0; i < $this.bubbles_number; i++) {
        $this.generate_bubbles()
    }
    
  }

  
  
  

   background.generate_bubbles = function() 
   {
     var $this = this;
     var base = $("<div class='shape_background'></div>");
     var shape_type = $this.shape ? $this.shape : Math.floor($this.rn(1,3));
     if(shape_type == 1) {
       var bolla = base.css({borderRadius: "50%"})
     }else if (shape_type == 2){
       var bolla = base.css({width:0, height:0, "border-style":"solid","border-width":"0 40px 69.3px 40px","border-color":"transparent transparent "+$this.style.bubbles_color+" transparent", background:"transparent"}); 
     }else{
       var bolla = base; 
     }    
     var rn_size = $this.rn(.8,1.2);
       
     bolla.css({
         "transform": "scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", 
         top: $this.wh+100, left:$this.rn(-60, $this.ww+60)
               });        
       
     bolla.appendTo($this.object);
       
     bolla.transit({
         top: $this.rn($this.wh/2,$this.wh/2-60), 
         "transform":"scale("+rn_size+") rotate("+$this.rn(-360,360)+"deg)", 
         opacity: 0},
                   
        $this.rn($this.speed[0],$this.speed[1]), 
        function(){
        $(this).remove();
        $this.generate_bubbles();
                 })
       
    }               


background.rn = function(from, to, arr) {
  if(arr){
          return Math.random() * (to - from + 1) + from;
  }else{
    return Math.floor(Math.random() * (to - from + 1) + from);
  }
    }
background.initializr()
            
            
            
            });
           

function easeOutBounce(t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
    return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
}


var start = 900; // starting position // 
var end = 100; // ending position // 
var frameRate = 60/1000; // per thousand milliseconds //
var duration = 1000;
var currentStep = 0; // current time //
var newY= 0; // initial position ?!
//var ball = document.getElementById("ball").value;

function animate() {
    // Before performing function animate, execute animate //
    currentStep++; // run this function for 60 times per second
    newY = easeOutBounce(currentStep, start, end - start, frameRate * duration);
    //ball.style.transform = 'translateY( ' + newY  + 'px)'; // 
    if (currentStep >= frameRate * duration ) {
        return;   
    }
    // run the function 60 time per second // 
    requestAnimationFrame(animate); 
}

animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bubble animation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
    <script src="https://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>

<div class="background_css3"></div>