CSS zoomIn动画div位置

Question

我正在尝试使用animate.css制作一个zoomIn动画框。 但是我对div的位置有疑问。 进行动画时，div作为位置从右向中间移动。 但是，在进行zoomIn动画时，div应该在它们所在的部分中增长。

我已经准备了一个演示程序以使其更加清晰。 这里缺少什么？

演示

 .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属性。 代替转换：translate（-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;
}