Me gustaría preguntarles a todos. Espero hacer efecto. Cuando se carga la página, puedo retrasar la transparencia del fondo durante 2 segundos y dejar que el pato en el medio se oculte del centro de la pantalla y se agrande lentamente y aparezca.
Pero acabo de aprender javascript y CSS, y ahora encontré el problema de que el pato no parece agrandarse desde el punto central. no se porque Además, quiero activar la animación con un retraso de dos segundos después de que se cargue la página. ¿Está bien esta forma de escribir? Como soy principiante, no sé si esta forma de escribir es correcta.
gracias por ver mi pregunta
let wrap = document.querySelector('.wrap'); let duck = document.querySelector('.duck'); window.onload = function() { setTimeout(change, 1000); // wrap.style.opacity = "0.6" } function change() { wrap.style.opacity = "0.6"; wrap.transition = "1.2s"; duck.style.transform = "scale(1.6)"; } .wrap { position: relative; width: 100vw; height: 100vh; background-image: url("https://images.unsplash.com/photo-1550757750-4ce187a65014?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"); background-repeat: no-repeat; background-size: cover; background-position: top center; } .duck { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; transform: scale(1); transform-origin: center; transition: 1s; } <div class="wrap"></div> <img class="duck" src="https://upload.cc/i1/2022/02/15/UB1kXd.png " alt="">Intente poner la escala de pato en 0, o la opacidad de pato en 0 desde el principio, o aplique la animación css a la clase .duck. No estoy seguro de lo que estás tratando de lograr.