模态框与css关键帧冲突

我创建了一个模态框，工作正常！ 之后，我解决使用css关键帧插入fadeInUp效果。 但是，在完成此操作后，模态框失去了居中位置。

谁能帮我解决这个问题？ 提前致谢！

模态框与关键帧conflit DEMO

原始模态盒DEMO

Answer 1

在您的演示中，您添加了一个包含以下内容的CSS动画：

keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } 

这会覆盖您在动画运行之前设置的翻译（-50％， – 50％）。

如果您将其更改为：

 keyframes fadeInUp { 0% { opacity: 0; margin-top: 20px; } 100% { opacity: 1; margin-top: 0; } } 

你得到相同的效果，但你不会覆盖你的居中偏移！

在这里演示