CSS zoomIn анимация позиции div

Question

Я пытаюсь создать анимационную коробку zoomIn, используя animate.css. Но у меня проблема с позицией div. Пока анимация происходит, div перемещается справа налево в качестве позиции. Но пока происходит анимация zoomIn, элементы div должны расти в той части, где они находятся.

Я подготовил демо, чтобы сделать его более понятным. Чего здесь не хватает?

DEMO

.radar {
    position: absolute;
    left: 50%;
    top: 50%;
	width:300px;
	height:300px;
    transform: translate(-50%, -50%);
	border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
	transition: all 0.2s ease-out;
    -webkit-animation: zoomIn 0.2s ease-in-out 0.2s;
    animation: zoomIn 0.2s ease-in-out 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.radar:nth-child(2) {
    position: absolute;
    left: 50%;
    top: 50%;
	width:400px;
	height:400px;
    transform: translate(-50%, -50%);
	border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
	transition: all 0.25s ease-out;
    -webkit-animation: zoomIn 0.25s ease-in-out 0.25s;
    animation: zoomIn 0.25s ease-in-out 0.25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.radar:nth-child(3) {
    position: absolute;
    left: 50%;
    top: 50%;
	width:500px;
	height:500px;
    transform: translate(-50%, -50%);
	border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
	transition: all 0.3s ease-out;
    -webkit-animation: zoomIn 0.3s ease-in-out 0.3s;
    animation: zoomIn 0.3s ease-in-out 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.radar:nth-child(4) {
    position: absolute;
    left: 50%;
    top: 50%;
	width:600px;
	height:600px;
    transform: translate(-50%, -50%);
	border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
	transition: all 0.35s ease;
    -webkit-animation: zoomIn 0.35s ease 0.35s;
    animation: zoomIn 0.35s easet 0.35s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.radar:nth-child(5) {
    position: absolute;
    left: 50%;
    top: 50%;
	width:700px;
	height:700px;
    transform: translate(-50%, -50%);
	border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
	transition: all 0.4s ease-out;
    -webkit-animation: zoomIn 0.4s ease-in-out 0.4s;
    animation: zoomIn 0.4s ease-in-out 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

<link href="https://daneden.github.io/animate.css/animate.min.css" rel="stylesheet"/>
<div class="radar"></div>
<div class="radar"></div>
<div class="radar"></div>
<div class="radar"></div>
<div class="radar"></div>

Answer 1

Используемая анимация выглядит следующим образом:

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

Таким образом, свойство transform из анимации переопределяет ваше свойство transform. Вместо преобразования: перевод (-50%, -50%); Вы должны использовать отрицательные поля для центрирования своих элементов. Ваш первый круг должен выглядеть так:

    .radar {
    position: absolute;
    left: 50%;
    top: 50%;
    width:300px;
    height:300px;
    margin-top: -150px; // add this
    margin-left: -150px; // add this
    border-radius: 50%;
    border: solid 1px #47b27f;
    background-image: radial-gradient( circle farthest-corner, rgba(0, 162, 213, 0) 52%, rgb(83, 165, 125) 100%);
    transition: all 0.2s ease-out;
    -webkit-animation: zoomIn 0.2s ease-in-out 0.2s;
    animation: zoomIn 0.2s ease-in-out 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}