Warm tip: This article is reproduced from serverfault.com, please click

html-Animate CSS Uncentering Div

(html - Animate CSS Uncentering Div)

发布于 2020-11-28 05:58:33

我的div位于屏幕中心,但是动画CSS使其保持居中状态。在此代码段中,div居中,直到我添加动画类。我如何解决这个问题,使其在保留动画的同时保持在中心?

#main {
  font-size: 48px;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" />

<div id="main" class="animate__animated animate__backInDown">
      Hello There
</div>
Questioner
theag
Viewed
11
huan feng 2020-11-28 14:10:57

你应该将内容包装在中div

#main {
  font-size: 48px;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" />
    
    <div id="main">
      <div class="animate__animated animate__backInDown">Hello There</div>
    </div>