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

Animate CSS Uncentering Div

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

I have a div that is at the center of the screen, but animate CSS keeps uncentering it. In this snippet the div is centered until I add the animate classes. How would I fix this so it stays at the center while retaining the animation?

#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
0
分享
huan feng 2020-11-28 14:10:57

You should wrap the content inside a 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>

热门帖子

1
为什么我的 TG 始终收不到提醒通知？
2
Android 开发方向：传统 View 开发 or 拥抱 Jetpack Compose
3
浙江 ISP 会屏蔽 Wireguard UDP 端口
4
高级 Java 岗位一定需要有管理经验吗
5
兄弟们，老是倒在大厂二面的怎么办？
6
最近很多小伙伴弄港卡，分享一下个人开卡经历
7
vercel 免费版 3 个指标都超了，好像我的网站已经获得了基础流量。还好套了 cloudflare 不然流量也超了。
8
最近换了真我手机，发现这系统连应用的数据都无法备份
9
MacBook Pro 决赛圈
10
连下厨房也要放弃网页版了

热门github

1
A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input
2
Dev tool that writes scalable apps from scratch while the developer oversees the implementation
3
shadcn/ui, but for Svelte. ✨
4
The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.
5
Performance-portable, length-agnostic SIMD with runtime dispatch
6
ZK Credo
7
OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement
8
Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.
9
Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.
10
This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems
11
Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...
12
🎓 Path to a free self-taught education in Computer Science!
13
1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java
14
A collective list of free APIs
15
📚 Freely available programming books