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

Posted 2023-03-12

【中文标题】为啥相同的 css 动画有时会不正确？

【英文标题】：Why the same css animation sometimes works incorrect?为什么相同的 css 动画有时会不正确？

【发布时间】：2019-05-03 17:06:58

【问题描述】：

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

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

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

【问题讨论】：

你是如何为尺寸变化设置动画的？请在此处添加足够的代码以重现。

请发布 MCVE：***.com/help/mcve

【参考方案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%;