用于宽度+高度+变换的CSS过渡Choppy

Question

我需要将带有动画的图像从网格视图扩展到＆＃34;灯箱＆＃34;视图。

HTML

<ul>
    <li><img src="cats.jpg"></li>
    <li><img src="cats.jpg"></li>
    <li><img src="cats.jpg"></li>
    .
    .
    .
</ul>

JS

function clickHandler(event) {
    var elem = event.target;
    elem.classList.add('animate');
    elem.style.transform = 'translate3d(x, y, z)';  // x, y, z are calculated px
    elem.style.width = w + 'px'; // w and h are also calculated
    elem.style.height = h + 'px';
}

一切正常，但动画不稳定。当我移除宽度和高度时，它会更顺畅。所以我尝试使用变换（即比例（3,3）），它也有一个平滑的动画，但图像模糊。

我不确定这是浏览器限制还是我采取了错误的方法。