模式框与CSS关键帧冲突 [英] Modal box conflict with css key frames

问题描述

我已经创建了一个模态框，并且效果很好！之后，我解析使用css关键帧插入fadeInUp效果.但是，这样做之后，模式框便失去了居中位置.

I have created a modal box, and works fine! After, i resolve insert a fadeInUp effect, using css keyframes. But, after make this, the modal box lost the centered position.

有人可以帮我解决这个问题吗?预先感谢！

Can anyone help me resolve this? Thanks in advance!

带有关键帧的模范盒被限制为演示版

原始模式框DEMO

推荐答案

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

In your demo you added in a CSS animation which contained this:

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

这会覆盖您的转换(-50％，-50％)，该转换是在动画运行之前设置的.

This overwrites your translate(-50%, -50%) which is set before the animation runs.

如果将其更改为:

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

您将获得相同的效果，但不会覆盖居中偏移！

You get the same effect but you don't overwrite your centering offset!

此处演示

这篇关于模式框与CSS关键帧冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！