[分享]css加入动画后定位失效

CSS加入动画后，有时候可能会导致定位失效。这是因为动画属性会改变元素的CSS属性，进而对元素的位置造成影响。那么该怎么解决呢？/ 原始CSS / .box { : absolute; left: 5...

CSS加入动画后，有时候可能会导致定位失效。这是因为动画属性会改变元素的CSS属性，进而对元素的位置造成影响。那么该怎么解决呢？

/* 原始CSS */
.box {
  position: absolute;
  left: 50px;
  top: 20px;
}

/* 加入动画后的CSS */
.box {
  animation: move 2s linear;
}

@keyframes move {
  0% {
    left: 50px;
    top: 20px;
  }
  100% {
    left: 200px;
    top: 100px;
  }
} 

在上面的代码中，原始CSS中的.box元素设置了绝对定位，并且左边距离为50px，上边距离为20px。但是在加入了动画后，.box元素的属性发生了改变，动画将元素从(50px, 20px)移动到(200px, 100px)。这时候，原先设置的定位属性就失效了。

解决这个问题的方法就是使用相对定位。通过将元素的定位方式从absolute改为relative，可以让元素始终相对于它的父元素进行定位，而不会对元素的位置产生过大的影响。下面是修改后的示例代码：

.box {
  position: relative;
  left: 50px;
  top: 20px;
  animation: move 2s linear;
}

@keyframes move {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 150px;
    top: 80px;
  }
} 

在这个示例代码中，.box元素的定位方式改为relative，并且在动画中也将初始的left和top值设置为0。这样，在动画过程中，.box元素的位置就是相对于它的父元素进行定位的。

总之，在使用CSS动画时出现定位失效的问题，需要考虑元素的定位方式是不是absolute。如果是，可以尝试将其改成relative，并适当修改动画代码，使元素位置的改变量不会太大。