Javascript CSS动画不是60帧/秒

我读过一些关于如何实现平滑CSS动画的博客，例如

我正在尝试实现红色圆圈比例动画，如下所示：

但是动画没有我想要的那么平滑

这是我的

body，
html{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
溢出：隐藏；
}
.圆圈{
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.圆圈。首先，
.圆圈，第二个{
宽度：2200px；
高度：2200px；
位置：绝对位置；
}
.圈，先{
动画：缩放2s立方贝塞尔（0.5,0.01,0,0.08）无限大；
不透明度：0；
}
.圆圈，第二个{
动画：缩放秒1s立方贝塞尔（0.5,0.01,0,0.08）无限大；
动画延迟：7秒；
不透明度：0
}
@关键帧比例{
从{
变换：比例（0）；
不透明度：1；
}
到{
转换：比例（1.5）；
不透明度：1；
}
}
@关键帧以秒为单位缩放{
从{
变换：比例（0）；
不透明度：1；
}
到{
转换：比例（1.2）；
不透明度：1；
}
}

 > p>您可能喜欢考虑转换的CSS转换。由于浏览器不必计算指定的关键帧之间的帧，因此这些具有更平滑渲染的潜力

缺点之一是转换必须由事件触发——在这种情况下，在页面加载时，类“loaded”被添加到每个循环中


document.body.onload=\u=>
document.querySelectorAll（'.circle'）.forEach（e=>{
e、 classList.add（'loaded'）
})
//处理此演示的大小调整
document.body.onresize=\u=>{
log（'已调整演示大小-重置转换'）
//删除该类
document.querySelectorAll（'.circle'）.forEach（e=>{
e、 classList.remove（'loaded'）
})
setTimeout（U8;=>{
log（“转换启动”）；
document.body.onload（）
}, 3000)
}
body，
html{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
溢出：隐藏；
}
.圆圈{
位置：相对位置；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：50%；
宽度：50px；
高度：50px；
位置：绝对位置；
变换：变换1s立方贝塞尔（0.5,0.01,0,0.08），不透明度为0s；
-webkit变换：变换1s立方贝塞尔（0.5,0.01,0,0.08），不透明度为0s；
-moz变换：变换1s立方贝塞尔（0.5,0.01,0,0.08），不透明度为0s；
-o变换：变换1s三次贝塞尔（0.5,0.01,0,0.08），不透明度为0s；
}
.第一圈{
背景#ff948d；
}
.第二圈{
过渡延迟：0.5s；
背景：白色；
不透明度：0；
}
.圆{
变换：标度（100）；
-webkit转换：规模（100）；
-moz变换：标度（100）；
-o变换：标度（100）；
-ms变换：标度（100）；
不透明度：1；
}

您好，您有基础动画的URL吗？您是指附加的gif吗@把这个拿走。顺便说一句，你可以先添加一个
将改变：将
规则转换为
.circle
，这样它将被GPU加速