模态框与css关键帧的冲突

Question

我已经创建了一个模态盒，并工作良好！之后，我使用css关键帧解析插入fadeInUp效果。但是，在做了这个之后，模态盒失去了中心位置。

有人能帮我解决这个问题吗？提前感谢！

带关键帧合并演示的模态盒

原始模态盒演示

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;
    }
}

你得到了同样的效果，但你不会覆盖你的中心偏移！

这里的演示