Masking a circle and moving the mask with animation - html

Question

I have a circular div that is vertically and horizontally centered in div. I am trying to achieve a css animation, that it seems like it's fading in from top to bottom.
I thought of making height 0 initially and moving to 50px, however as it is centered, it starts to getting created from the center. Instead, I want to it to get positioned to the initial position and it gets created from top to bottom. Just like there is a square only masking the circle and nothing else, and it moves to down.
#circle {
width: 80px;
height: 80px;
border-radius: 50px;
}
How can I add this a square mask to achieve the below effect?
Please note that background has a gradient, so I can't put a square and assign it a color directly, thus I thought I need to mask them.
How to achieve this effect?
What I have tried:
#keyframes example {
from {height: 0}
to {height: 80px}
}
As the circle is centered, it starts to expand from the middle. This is not what I want. That's why I thought of the mask

Answer 1

Edited answer:
I am able to achieve this with a combination of a image background and background-position animation.
This will not work if you set the background as a CSS color like #fff. it needs to be an image or a gradient. You also need to set background-repeat to no-repeat
The animation simply starts with the background out of the div display area then pulls the the background downward into the display area.
Kindly check the examples in full-screen.
Working snippet (jpeg image as object background):
body {
background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
margin: 0 auto;
height: 120vh;
overflow: hidden;
}
.sun {
height: 400px;
width: 400px;
border-radius: 100vw;
margin: 5em auto;
animation-name: sunrise;
animation-duration: 10s;
animation-delay: .5s;
animation-timing-function: linear;
animation-iteration-count: 1;
background: url(https://image.ibb.co/eVdQ3Q/white.jpg);
background-repeat: no-repeat;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes sunrise {
from {
opacity: 1;
background-position: 0 -700px;
}
to {
opacity: 1;
background-position: 0 0px;
}
}
<div class="sun"></div>
Working snippet (gradient as object background):
body {
background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%), linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
margin: 0 auto;
height: 120vh;
overflow: hidden;
}
.sun {
height: 400px;
width: 400px;
border-radius: 100vw;
margin: 5em auto;
animation-name: sunrise;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: 1;
background: linear-gradient(white,white);
background-repeat: no-repeat;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes sunrise {
from {
opacity: 1;
background-position: 0 -700px;
}
to {
opacity: 1;
background-position: 0 0px;
}
}
<div class="sun"></div>