HTML元素transform scale过渡仅在鼠标移动时播放动画，如何解决？

1. 在线编辑器（如JSFiddle）不生效原因
   这类在线代码工具的运行环境会将用户编写的代码嵌入到隔离的iframe沙箱中，你直接操作的html节点实际是沙箱外层的根节点，而非你自定义的页面根节点，部分编辑器还会默认拦截对顶层根节点的样式修改，因此代码不会生效。
2. 本地运行仅移动鼠标时动画播放的原因
   这是浏览器的性能优化机制导致的。当页面无用户交互、无其他活跃渲染任务时，浏览器会降低非必要动画的重绘频率，甚至临时暂停重绘来节省资源。你直接为<html>根节点设置transform动画时，浏览器会误判该动画无可见内容更新，只有鼠标移动触发页面强制重绘时，才会同步更新动画帧。

• 不要直接将transform动画绑定在<html>根节点上，新增一个全尺寸的页面容器，所有页面内容都放在该容器内，动画属性绑定在这个容器上
• 确保JS逻辑在DOM加载完成后执行，避免节点未就绪导致的样式修改失效
• 新增GPU加速触发属性，避免浏览器的重绘优化拦截动画

<!DOCTYPE html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  width: 100%;
}
.page-wrapper {
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform 15s linear;
  transform: scale(0.6);
  background: url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}
</style>
</head>
<body>
  <div class="page-wrapper">
    <!-- 所有页面内容放置于此 -->
  </div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function(){
    document.querySelector(".page-wrapper").style.transform = "scale(0.7)";
  }, 1000);
})
</script>
</body>
</html>

修改后无需用户交互即可自动播放完整动画，同时兼容在线编辑器运行环境。

内容的提问来源于stack exchange，提问作者Suisse