css - 当我通过过渡/动画增加大小时，元素子元素 "shakes"

Question

我这里有一个圆圈，当我将鼠标悬停在它上面时，它会随着大小而增加。当我这样做时，中间的“+”会“震动”。

HTML

    <div class='test-ani'>
       <span>+</span>
    </div>

CSS

.test-ani {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: cornflowerblue;
    user-select: none;
    cursor: pointer;

    &:hover {
        transition: .5s;
        width: 120px;
        height: 120px;
    }

    span {
        color: #ffdb58;
        font-size: 50px;
        padding: 0;
        margin: 0;
    }
}

视觉动图

Answer 1

动画转换规则:

section {
  position: relative;
  width: 100%;
  height: 100%;
}
.test-ani {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: cornflowerblue;
  user-select: none;
  cursor: pointer;
}
.test-ani:hover {
  transition: transform .5s;
  transform: scale(1.2);
}
.test-ani span {
  color: #ffdb58;
  font-size: 50px;
  padding: 0;
  margin: 0;
}

<section>
  <div class='test-ani'>
     <span>+</span>
  </div>
</section>