Este es mi código simple, que quiero que escale todo mi documento (html) con un retraso de 1 s (con javascript) y debería animar lentamente la escala de todo el sitio web.
En este violín, en realidad no funciona en absoluto, pero en mi archivo en realidad lo anima, pero solo cuando el usuario mueve el mouse constantemente.
html { altura: 100%; ancho: 100%; transición: transforma 15s lineal; transformar: escala (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>No pude hacerlo funcionar con su código, así que lo modifiqué así:
<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> Y parece funcionar como se esperaba para mí, ya sea que mueva el mouse o no. El problema es que el background en html o en la etiqueta del body llenará el tamaño completo de la pantalla, incluso si se acerca, se aleja o se cambia el tamaño.
EDITAR:
Si desea que el fondo se ajuste a la ventana completa mientras crece el contenido: acabo de agregar un div en su body para ver más fácilmente lo que está sucediendo. ¿Es esto lo que quieres tener?
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>