Modal box conflict with css key frames

Question

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

Answer 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