html 上的转换比例转换仅在鼠标移动时设置动画答案

【问题标题】：Transition for transform scale on html is only animating when mouse is movinghtml 上的转换比例转换仅在鼠标移动时设置动画
【发布时间】：2021-11-25 22:13:36
【问题描述】：

这是我的简单代码，我希望它以 1 秒的延迟（使用 javascript）缩放我的整个文档 (html)，并且它应该缓慢地为整个网站的规模设置动画。

在这个小提琴中，它根本不工作 - 但在我的文件中它实际上是动画它，但只有当用户不断移动鼠标时。

html { 高度：100%；宽度：100%； transition：变换15s线性；变换：比例（0.6）

setTimeout(function(){
  document.querySelector("html").style.transform = "scale(0.7)";
},1000)

html {
  height: 100%;
  width:100%;
  transition: transform 15s linear;
  transform: scale(0.6);  background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
 }

<html>
<body></body>
</html>

【问题讨论】：

如果没有重现行为的代码，我不确定会发生什么。请edit您的问题包括minimal reproducible example，以及期望的结果是什么。

标签： javascript html css css-animations

【解决方案1】：

我无法让它与你的代码一起工作，所以我这样修改它：

<script>
setTimeout(function(){
  document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>

<style>

html {
  height: 100%;
  width:100%;
 }

 #test{
   height: 100%;
   width:100%;
   transition: transform 15s linear;
   transform: scale(0.6);
   background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
 }
 </style>

<html>
<body>
  <div id="test"></div>
</body>
</html>

无论我是否移动鼠标，它似乎都按预期工作。问题是html 或body 标签上的background 会填满整个屏幕，即使放大和缩小或调整大小也是如此。

编辑：

如果您希望在内容增长时背景适合整个窗口：我刚刚在您的body 中添加了一个div，以便更轻松地查看正在发生的事情。这是你想要的吗？

setTimeout(function(){
  document.querySelector("html").style.transform = "scale(0.8)";
},1000)

html {
  height: 100%;
  width:100%;
  transition: transform 15s linear;
  transform: scale(0.6);
  background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}

body{
  height: 100%;
  width:100%;
}

div{
  height: 100%;
  width:100%;
  background-color: #000;
}

<body>
  <div></div>
</body>

【讨论】：

我无权访问 html 结构 - 因此无法使用 html 缩放？
如果你使用包装器#test，并设置初始比例（0.6） - 不是你的整个屏幕都会被背景图像覆盖。
我知道我只是保留了您在问题中给出的相同比例修改。
其次，我现在不确定您要做什么：您希望所有网站都增长，还是希望背景在内容增长时适合所有页面？
提供的答案不是缩放背景。我想放大整个网站！作为一个整体（背景，内部的任何对象，一切） - 你所做的只是缩放 div 而不是背景图像。我想要的是对网站的慢速相机变焦效果。背景可以在窗口边框上增长（溢出：隐藏）。整个网站应该放大。