Q:

рывки при анимации

Привет, друзья!
Есть div, который я анимирую в определенное место на странице.
для анимации использую css transform: scale, top, left при выставленном  transition: all 2s;
Проблема в том, что если задать все три свойства одновременно, то первая анимация происходит с заметными рывками. Вопрос в том, как сделать анимацию плавной без рывков? Метод анимации не имеет значения. Имеет значение, чтобы анимируемый элемент сохраняя пропорции анимированно уместился в сайдбаре.
Есть особенность, может кто сможет осмыслить: если в codepen'е потянуть за границу окна просмотра результата, сделав небольшой resize, то первая анимация будет плавной.

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>

Пример на codepeo.io

A:

Попробуйте использовать библиотеку для анимации. Например https://greensock.com/docs/#/HTML5/GSAP/TweenLite/

