Почему тормозит анимация и как это устранить?

Question

[4eloBek]

Сделал "велосипед":
> Пример на 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');
  }
})

На чистом css было бы плавнее, но отсутствовала бы интерактивность(
Как реализовать сие без лагов? ))

Answer 1

[Ivanq]

jsfiddle.net/Ivanq/c9910wj4
???

Comments

[4eloBek]

Гибкости нет. Как в этом случае анимацию подстроить под размер экрана, например ?

[Ivanq]

4eloBek: jsfiddle.net/Ivanq/c9910wj4/1

Answer 2

[Андрей Чернышев]

Во первых border-radius: 50000px это не правильно. Сделайте 50%, результат будет такой же. Если есть тормоза, попробуйте включить аппаратное ускорение путём 3д трансформации:

.main {
  transform: translateZ(0)
}

Answer 3

[Panya]

Через transform: scale увеличивайте круг вместо width/height, тогда будет работать аппаратное ускорение и будет плавно.

Comments

[4eloBek]

Пробовал. Scale размывает объект(