html - 为什么相同的 css 动画有时会不正确？

Question

我使用 CSS 为 div 的大小设置动画。我需要 div 从中心开始变大。

但是由于某些原因，在页面上有些地方可以正常工作，有些地方不行，div从左上角开始增长。

为什么会发生这种情况，我该如何解决？

Answer 1

试试这个!!

FlexBox 文档:https://www.w3schools.com/css/css3_flexbox.asp

.circle {
  border-radius: 100%;
  display: flex;
  transition: all 2s;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.circle.red {
  background-color: red;
}

.circle.blue {
  background-color: blue;
}

.circle.out {
  width: 200px;
  height: 200px;
}

.circle.in {
  width: 0px;
  height: 0px;
}

.circle.animate {
  animation-name: bigger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes bigger {
  from {
    width: 0;
    height: 0;
  }

  to {
    width: 100%;
    height: 100%;
  }
}

<div class="circle out red">
  <div class="circle in blue animate"></div>
</div>