生涩的动画

set_random_propites_for_div();

function set_random_propites_for_div(){
	var random_width = Math.floor((Math.random() * 150) + 350);
  var random_height = Math.floor((Math.random() * 100) + 250);
  var random_top = Math.floor((Math.random() * 1) + 100);
  var random_left = Math.floor((Math.random() * 100) + 300);
	$('#random_div_1').css('width', random_width+'px').css('height', random_height+'px').css('top', random_top+'px').css('left', random_left+'px');
}


var start_width = $('#random_div_1').outerWidth();
var finish_width = $('#sidebar').outerWidth() - 10;
var offset = $('#random_div_1').offset();
var start_offset_left = offset.left;
var start_offset_top = offset.top;
var finish_offset_left = 5;
var finish_offset_top = 5;
var delta_offset_left = start_offset_left-finish_offset_left;
var delta_offset_top = start_offset_top-finish_offset_top;
var scale = finish_width/start_width;

function animate_div(){
   $('#random_div_1').css({
     transform: 'scale('+scale+')',
     left: finish_offset_left+'px',
     top: finish_offset_top+'px'
   });
}
function re_animate_div(){
   $('#random_div_1').css({
     transform: 'scale(1)',
     left: start_offset_left+'px',
     top: start_offset_top+'px'
   });
} 

$('#start_animate').click(function(){
  animate_div();
});

$('#back_animate').click(function(){
  re_animate_div();
});

#wrapper{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
}
#start_animate, #back_animate{
  padding: 10px;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  width: 100px;
  position: absolute;
  top: 10px;
  cursor: pointer;
}
#start_animate{
   left: 200px;
}
#back_animate{
   left: 350px;
}
#sidebar{
  position: relative;
  width: 100px;
  height: 100%;
  background-color: black;
  opacity: 0.2;
}
#random_div_1{
  position: absolute;
  will-change: transform, top, left;
  transition: all 1s;
  transform-origin: top left;
  background-color: green;
  font-size: 140px;
  color: white;
  font-family: Verdana;
  text-align: center;
}

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

<div id="wrapper">
  <div id="start_animate">start animate</div>
  <div id="back_animate">back animate</div>
  <div id="sidebar"></div>
  <div id="random_div_1">
    <div id="text">ABC</div>
  </div>
</div>