如图，如何完成圆角套圆形呀！

问问如何完成这样的圆角套圆形，实在是重不上去，就来问问大家，谢谢呀

<div style="width: 60px;height: 30px;border-radius: 30px;border: 1px solid #ccc;position: relative;box-sizing: border-box;">
    <div style="width: 30px;height: 30px; background: #f00; border-radius: 50%;position: absolute;top: 0;left: 0;"></div>
</div>

参考 https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
ease-in-out 可以替换任何一个timing-function

<div class="outer">
    <div class="inner"></div>
 </div>

.outer {
  position: relative;
  display: block;
  width: 300px;
  height: 96px;
  border: 1px solid #999;
  border-radius: 48px;
}

.inner {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 92px;
  height: 92px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #999;
}

.outer:hover {
  background: green;
}

.outer:hover .inner {
  animation: move 2s ease-in-out forwards;
}

@keyframes move {
  from {
    left: 1px;
  }
  
  to {
    left: 200px;
  }
}