0

我有一个宽度已知但高度未知（高度：自动）的 div。

它需要在视图中进行动画处理，然后在浏览器中垂直和水平居中。它的父母是身体。

我正在使用 animate.css CSS 库来执行动画。

如果我使用 translate 使 div 居中，那么动画会向下和向右偏移 div，然后，当动画完成时，它会“捕捉”回屏幕的中心。

我猜这与翻译有些冲突？

任何想法将不胜感激。

4

1 回答 1

0

如果您将图层设置为绝对位置并播放类似这样的翻译，您可以做到这一点

HTML

<div class="container-layer">
  <div class="layer">
    Lorem ipsum dolor sit amet
  </div>
</div>

CSS

.container-layer {
    position:relative;
    height:100vh;
    width:100vw;
    display:block;
    }
.layer{
  -webkit-animation: animation 2s linear;
    margin: 0;
    max-width:90px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
    }

@keyframes animation {
   0% {
    transform: translate(200%, 200%)
   }

   100% {
    transform: translate(-50%, -50%)
   }
}

https://jsfiddle.net/MAXXALANDER/rjmfbyg9/2/

您正在使用动画库，但我认为它的工作原理相同

于 2020-02-08T02:13:38.253 回答