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