Question

HTML here：

<div class="wrapper">
  <div class="btn_img">
    <a href="#"><img src="path/to/img" alt=""></a>
  </div>
</div>

CSS：

.wrapper .btn_img {
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  animation-name: btnP1lay;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes btnPlay {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

如果我从.btn_img元素中删除动画，它会获得位置中心，我需要动画。通过动画，它可以改变位置。

Answer 1

您已使用transform: translate(-50%, 50%);对图像进行居中。现在，当您在动画中使用transform: scale(1);时，它会移除translate转换，这就是图像移位的原因。您需要在动画状态中保持translate，并在下面给出：

.wrapper .btn_img {
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  animation-name: btnPlay;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes btnPlay {
  0% { transform: translate(-50%, -50%)  scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05);}
  100% { transform: translate(-50%, -50%) scale(1); }
}

<div class="wrapper">
  <div class="btn_img">
    <a href="#"><img src="http://placehold.it/300X200" alt=""></a>
  </div>
</div>

添加动画属性后，元素位置会发生变化

1 个答案: