Expands background on a circle shape - html

Question

I'm trying to do a circle that expands-change color from the center, and i want it to expand it with border-radius: 50%, you'll understand what i'm talking about if you watch the example i made
Checkout the sample i made for better understanding
Thanks for any help

Answer 1

You could run a transition over an inset box-shadow, like so
div {
width: 300px;
height: 300px;
display: flex;
color: #FFF;
justify-content: center;
align-items: center;
border-radius: 50%;
background: #03BF60;
cursor: pointer;
transition: box-shadow .75s 0s, color .5s 0s;
box-shadow: inset 0 0 0 0 #DCEDC8;
}
div p {
color: inherit;
text-align: center;
}
div:hover {
color: #444;
box-shadow: inset 0 0 0 150px #DCEDC8;
}
<div>
<p>
Responsive design. I get this certificate by
learning HTML, CSS, web design, media query plus
animations using keyframes, declaring variables
on css and a lot of CSS components.
</p>
</div>

Answer 2

You could to use Keyframes...
<div class="shape">
<div class="to-animate animate"></div>
</div>
.shape {
border-radius: 50%;
width: 200px;
height: 200px;
background: red;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.to-animate {
width: 0;
height: 0;
background: blue;
}
.animate {
animation: my-animation 1s forwards;
}
#keyframes my-animation {
to {
width:200px;
height: 200px;
}
}
https://jsfiddle.net/hernangiraldo89/ba3ne675/
Keyframes are a powerful tool, here its documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes