Модальный конфликт коробки с ключевыми кадрами css

Question

Я создал модульную коробку и отлично работает! После этого я разрешу вставить эффект fadeInUp, используя ключевые кадры css. Но после этого модальная коробка потеряла центрированное положение.

Может ли кто-нибудь помочь мне разрешить это? Заранее спасибо!

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