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

【问题标题】：Why the same css animation sometimes works incorrect?为什么相同的 css 动画有时会不正确？
【发布时间】：2019-05-03 17:06:58
【问题描述】：

我使用 css 为 div 的大小设置动画。我需要 div 从其中心增大大小。

但由于某种原因，在页面的某些地方，它工作正常，而在其他地方，它不起作用，并且 div 从左上角开始增长。

为什么会发生，我该如何解决？

【问题讨论】：

你是如何为尺寸变化设置动画的？请在此处添加足够的代码以重现。
请发布 MCVE：stackoverflow.com/help/mcve

标签： android html ios css mobile

【解决方案1】：

试试这个！！

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

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

.circle{
  border-radius:100%;
  display: flex;
  transition: all 2s;
  align-items: center;
  justify-content: center;
}
.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%;}
}

【讨论】：