模态框与css关键帧冲突

Question

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

任何人都可以帮我解决这个问题吗？提前谢谢！

Modal box with keyframe conflit DEMO

Original modal box 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;
    }
}

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

Demo here