Javascript 为什么CSS转换原点和转换不能一起转换？

下面是一个演示：

（将附加代码）

在我的浏览器中，第三个过渡不是平滑的。它在最后一次向目标闪烁。它似乎在转换过程中首先忽略了变换原点，但在最后应用了它。为什么会这样

另外，浏览者可能会对结果有所不同。在我的Windows10设备上，Chrome75在传输结束时闪烁，在Firefox70中它在颤抖，而在Edge 41中什么也没发生

HTML:

Transited:CSS转换
Transited:CSS转换原点
Transited:CSS转换和转换原点

CSS:

.container{
宽度：300px；
高度：300px；
溢出：隐藏；
}
#第1箱、第2箱、第3箱{
宽度：300px；
高度：300px；
背景色：白色；
背景尺寸：30px 30px；
背景位置：-8px-8px；
背景图像：线性梯度（透明50%，rgba（200,0,0,0.5）50%，rgba（200,0,0,0.5）），线性梯度（90度，透明50%，rgba（200,0,0,0.5）50%，rgba（200,0,0,0.5））；
转换：转换（0px，0px）比例（1.5）；
变换原点：0px 0px；
}
#框1{
转换：转换1000ms，转换原点1000ms；
}
#框2{
转换：转换1000ms，转换原点1000ms；
}
#框3{
转换：转换1000ms，转换原点1000ms；
}

Javascript:

var-box1=document.getElementById（'box1'）；
var box2=document.getElementById（'box2'）；
var box3=document.getElementById（'box3'）；
变量转换={
x:0,，
y:0，
比例：1.5，
牛:0,，
oy:0
};
box1.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
box1.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
box2.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
box2.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
box3.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
box3.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
setInterval（（函数（）{
var阶跃=0；
变量步骤=[{
x:-100，
y:-100，
比例：2，
牛：-100，
oy:-100，
}, {
x:-200，
y:-100，
比例：2，
牛：-200，
oy:-100，
}, {
x:-200，
y:-200，
比例：2，
牛：-200，
oy:-200，
}, {
x:-100，
y:-200，
比例：2，
牛：-100，
oy:-200，
}];
返回函数（）{
转换=步骤[步骤]；
步骤+=1；
步骤%=4；
//box1.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
box1.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
box2.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
//box2.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
box3.style.transformOrigin=`${transform.ox}px${transform.oy}px`；
box3.style.transform=`translate（${transform.x}px，${transform.y}px）scale（${transform.scale}）`；
}
})(), 1500);

千万不要将

all

用作

transition

属性，因为这会循环遍历所有可设置动画的属性。使用

转换

如果你真的想用javascript制作动画，你需要在每次屏幕刷新时都能更新的东西

requestAnimationFrame

是您所需要的，因为

setInterval

和

setTimeout

可以在屏幕重新绘制期间激活，从而使动画“跳跃”

---

谢谢你的回答。但是为什么css转换不能工作呢？

transition:all 1000ms

应该是

transition:transform1000ms

：）另外，我猜你想做一些动态的事情，比如用户点击#框中的一个点，你就可以设置动画到那个点。否则，请使用CSS的关键帧动画，而不是所有javascript代码。我理解并注意到，

requestAnimationFrame

和CSS关键帧动画将起作用。但是，当

转换：所有1000ms

到

转换：转换1000ms

时，不会修复它。即使是

转换：转换1000ms，转换起始1000ms也没有帮助。为什么CSS关键帧动画工作正常，而过渡却不正常？这是因为我在第二点写的。两者都可能是动画滞后的原因。