How to avoid animated element expanding the page when it scales up - html

Question

I want to place the css animation so it only shows partially on the page.
My problem is that it keeps expanding the page.
I have tried using overflow hidden on .ripple-background but this doesn't work. I have also tried using clip but I don't think this is the right solution unless I am using it wrong.
Can anyone shed some light for me please!
.ripple-background {
position: sticky;
z-index: -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
height: 610px;
width: 610px;
margin-left: 60%;
margin-top: 50vh;
}
.circle {
position: absolute;
border-radius: 50%;
background: white;
animation: ripple 25s infinite;
box-shadow: 0px 0px 1px 0px #b1b1b1;
}
.small {
width: 100px;
height: 100px;
}
.medium {
width: 200px;
height: 200px;
}
.large {
width: 300px;
height: 300px;
}
.xlarge {
width: 400px;
height: 400px;
}
.xxlarge {
background-color: grey;
width: 500px;
height: 500px;
}
.shade1 {
opacity: 1;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<!-- Animation -->
<div class="ripple-background">
<div class="circle xxlarge shade1"></div>
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle medium shade4"></div>
<div class="circle small shade5"></div>
</div>
<!-- Animation END-->

Answer 1

For overflow hidden to work, you need it to be on a parent container, with the content inside of it that you want to hide.
Below, I've created a wrapper and set it to be the size of the page.
* {
padding:0;
margin:0;
}
#wrapper {
width: 100vw;
height: 100vh;
overflow:hidden;
}
.ripple-background {
position: sticky;
z-index: -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-items: center;
align-items: center;
height: 610px;
width: 610px;
margin-left: 60%;
margin-top: 50vh;
}
.circle {
position: absolute;
border-radius: 50%;
background: white;
animation: ripple 25s infinite;
box-shadow: 0px 0px 1px 0px #b1b1b1;
}
.small {
width: 100px;
height: 100px;
}
.medium {
width: 200px;
height: 200px;
}
.large {
width: 300px;
height: 300px;
}
.xlarge {
width: 400px;
height: 400px;
}
.xxlarge {
background-color: grey;
width: 500px;
height: 500px;
}
.shade1 {
opacity: 1;
}
.shade2 {
opacity: 0.5;
}
.shade3 {
opacity: 0.7;
}
.shade4 {
opacity: 0.8;
}
.shade5 {
opacity: 0.9;
}
#keyframes ripple {
0% {
transform: scale(0.8);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(0.8);
}
}
<!-- Animation -->
<div id='wrapper'>
<div class="ripple-background">
<div class="circle xxlarge shade1"></div>
<div class="circle xlarge shade2"></div>
<div class="circle large shade3"></div>
<div class="circle medium shade4"></div>
<div class="circle small shade5"></div>
</div>
</div>
<!-- Animation END-->