Background animation infinite zoom-in zoom-out

Joined
Dec 23, 2021
Messages
5
Reaction score
0
Hi,

I have a <section> which has a background image and a headline inside. I want to animate the background zoom-in and out infinite. So I did this:
Code:
section {
    width:100%;
    min-height:100vh;
    background-image:url('images/bg.webp');
    background-repeat:no-repeat;
    background-size:cover;
    background-position:top center;
    box-sizing:border-box;
    display:flex;
 animation: zoom 30s infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.01, 1.01);
  }
  100% {
    transform: scale(1, 1);
  }
}

Everything is working fine except that I see the browser window also is resizing once the image exceeds it original size when zoom-in as show the pic below:

2022-07-01 12_12_38-.jpg


May I know how to prevent this from resizing each time it animates?

Thank you
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top