动画完成后绝对定位的元素移动

有一阵子了。无论如何，在制作动画时让绝对定位的元素保持居中会遇到一些麻烦。更重要的是，我在动画完成后看到元素“移动”，我不知道为什么。我发现的最接近的问题是css 动画移动元素位置，但这并没有解决这个常见用例。

调试动画帧，我们可以看到以下内容：

动画期间

动画后

糟糕！玩定位没有用，但animation-fill-mode做了一些事情；但是，我注意到translate在动画期间或animation-fill-mode设置为forwards或时对定位元素没有影响both。为什么？副作用是当动画完成时，元素的位置不会被重新计算，所以没有重绘。

例子：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

以及animate.css用于让生活变得轻松的 CSS ：

.alert {
  min-width: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  /* animation-fill-mode: forwards; */
  transform: translateX(-50%);
}

演示：https : //codepen.io/atomicpages/pen/yrymVY?editors=1100

目标：

1. 居中对齐
2. 元素至少是 500px
3. 动画帧完成后元素不会移动

感谢您的帮助。