Почему одна и та же анимация CSS иногда работает некорректно?

Question

Я использую css для анимации размера div. Мне нужно, чтобы div увеличился в размере от его центра.

Но по некоторым причинам в некоторых местах на странице он работает нормально, а в других местах он не работает, и div растет из своего верхнего левого угла.

Почему это происходит и как я могу это исправить?

Answer 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%;}
}