Расширяет фон в форме круга

Question

Я пытаюсь сделать круг, который расширяет, меняем цвет от центра, и я хочу, чтобы он расширял его с помощью border-radius: 50%, вы поймете, о чем я говорю, если вы посмотрите пример я сделал

Проверьте образец, который я сделал для лучшего понимания

Спасибо за любую помощь

Answer 1

Вы можете запустить transition над вставкой box-shadow, например,

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

Вы можете использовать ключевые кадры ...

<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/

Ключевые кадры являются мощным инструментом, здесь его документация:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes