How to achieve lazy loading animation effect through javascript

Question

I would like to ask everyone. I hope to make an effect. When the page is loaded, I can delay the transparency of the background for 2 seconds, and let the duck in the middle hide from the middle of the screen and slowly enlarge and appear.

But I have just learned javascript and CSS, and now I found a problem that the duck doesn't seem to be enlarged from the center point. I don't know why? In addition, I want to trigger the animation with a delay of two seconds after the page is loaded. Is this way of writing OK? Since I'm a beginner, I don't know if this way of writing is correct?

Thanks for watching my question

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

Answer 1

Try to put the scale of duck to 0, or opacity of duck to 0 from the start, or apply css animation to.duck class. Not sure what are you trying to achieve.