Popup Fade In and Fade Out - CSS

[Liam_Dietrich]

Goal: Fade-out perspective popup using CSS.

Following up on the following discussion...

Can you animate a popup window in perspective?

I am trying to figure out a way to put an animation on a popup window in perspective. Whenever the user clicks a button I would like the popup to slow animate from the top of the screen around 150-200px down the screen.

The code attached allows for the popup to fade-in but not fade-out. Any suggestions on how to fade-out the popup would be greatly appreciated. Thanks in advance.

@keyframes popUp_fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}

@-webkit-keyframes popUp_fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;       
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1; 
    }       
}



#popup-ySTTBctk {
    animation-name: popUp_fadeIn;
    -webkit-animation-name: popUp_fadeIn;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}