我的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>
你应该将内容包装在中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>