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>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. The issue is that the background on html or body tag will fill the full size of the screen even if zooming in and out or resizing.
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>