Skip to content

How to achieve lazy loading animation effect through javascript

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);
  // = "0.6"

function change() { = "0.6";
  wrap.transition = "1.2s"; = "scale(1.6)";
.wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url("");
  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="
" alt="">


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.