Why does the animation slow down and how to fix it?

Question

css

Made a "bicycle":
> Example on codepen.io

HTML :

<div class="main">
  <div class="circle1"></div>
</div>

css :

html {overflow: hidden}
.main {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #ccc;
  overflow: hidden;
}
.circle1 {
  position: absolute;
  bottom: 1em;
  right: 1em;
  width: 30px;
  height: 30px;
  background: #008dc7;
  border: 1px solid #008dc7;
  border-radius: 50000px;
  cursor: pointer;
}

JS ( Jquery ):

var min_l = Math.min($('.main').height(), $('.main').width());
var max_l = Math.max($('.main').height(), $('.main').width());
var anim_t = max_l/220;
max_l = max_l * Math.sqrt(2) * 1.5;

var indicator = true;

$('.circle1').click(function() {
  if(indicator) {
    indicator = false;
    $('.circle1').css({'transition': anim_t+'s', 'width': max_l, 'height': max_l, 'transform': 'translate('+min_l+'px,'+min_l+'px)'})
  }
  else {
    indicator = true;
    $('.circle1').removeAttr('style');
  }
})

On pure css it would be smoother, but there would be no interactivity (
How to implement this without lags? ))

Answer 1

jsfiddle.net/Ivanq/c9910wj4
???

Answer 2

First of all, border-radius: 50000px is not correct. Do 50%, the result will be the same. If there are brakes, try enabling hardware acceleration by 3d transformation:

.main {
  transform: translateZ(0)
}