为div添加动画以增加宽度和高度，并向各个方向扩展

Question

我有一个圆圈div，我想让它在点击时向各个方向扩展，然后再缩回来。问题是，因为位置是由左上角定义的，所以圆圈会变大，但只会向下和向右扩展，这会产生一种奇怪的效果。

document.getElementById("circle").onclick = function(e){
  document.getElementById("circle").classList.add("animate")
  document.addEventListener("animationend", function(){
  document.getElementById("circle").classList.remove("animate")
  });
};

#circle{
  width: 20px;
  height: 20px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  
  
}
.animate{
  animation-name: expand;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  
}
@keyframes expand{
  0%{width: 20px; height: 20px;}
  50%{width: 50px; height: 50px;}
  100%{width: 20px; height: 20px;}
}

<div id = "circle"><div>

我真的希望它能在所有的边都扩展，就像如果位置是从中心定义的，你只需要增加半径。有什么方法可以达到这种效果吗?

Answer 1

使用clip-path

document.getElementById("circle").onclick = function(e){
  document.getElementById("circle").classList.add("animate")
  document.addEventListener("transitionend", function(){
  document.getElementById("circle").classList.remove("animate")
  });
};

#circle{
  width: 100px;
  height: 100px;
  background-color: black;
  position: absolute;
  inset:0;
  margin: auto;
  border-radius: 50%;
  clip-path: circle(20%);
  transition: .5s;
}
#circle.animate{
  clip-path: circle(50%)
}

<div id = "circle"><div>