Modal box conflict with css key frames

问题:

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!

Modal box with keyframe conflit DEMO

Original modal box DEMO

回答1:

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

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

If you change it to:

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!

Demo here