<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
body {
background-color: #25272c;
display: grid;
place-items: center;
height: 100vh;
}
.container {
background: #eb5bec;
border-radius: 16px;
display: grid;
height: 385px;
overflow: hidden;
place-items: center;
position: relative;
width: 315px;
}
.box {
animation: grow 10s linear infinite;
background: #471e45;
height: 100px;
opacity: 0.5;
position: absolute;
width: 100px;
}
@keyframes grow {
from {
opacity: 0.5;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(3.85);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.