Transition for transform scale on html is only animating when mouse is moving-CodePudding

This is my simple code, which I want it to scale my whole document (html) with a delay of 1s (with javascript) and it should animate slowly the scale of the whole website.

In this fiddle, it is not really working at all - but on my file it actually animates it, but only when the user moves the mouse constantly.

html { height: 100%; width:100%; transition: transform 15s linear; transform: scale(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>

CodePudding user response：

I could not make it work with your code so I modified it like this:

<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>

And it seems to work as expected for me, whether I move the mouse or not.

EDIT:

If you want the background to fit the full window while the content is growing: I just added a div in your body to see easier what is happening. Is this what you want to have?

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>

CodePudding user response：

I could not make it work with your code so I modified it like this:

<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"); }

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