# Popup Fade In and Fade Out - CSS

**URL:** <https://forum.inductiveautomation.com/t/popup-fade-in-and-fade-out-css/77079>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 28, 2023, 4:20pm UTC](https://forum.inductiveautomation.com/t/popup-fade-in-and-fade-out-css/77079 "2023-07-28T16:20:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Liam\_Dietrich](https://avatars.discourse-cdn.com/v4/letter/l/b5a626/32.png) [@Liam\_Dietrich](https://forum.inductiveautomation.com/u/Liam_Dietrich)\
**Post date:** [July 28, 2023, 4:20pm UTC](https://forum.inductiveautomation.com/t/popup-fade-in-and-fade-out-css/77079/1 "2023-07-28T16:20:25Z")

</div>

**Goal:** Fade-out perspective popup using CSS.

Following up on the following discussion...

> [@Can you animate a popup window in perspective?](https://forum.inductiveautomation.com/t/can-you-animate-a-popup-window-in-perspective/74925):
>
> 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.

```auto
@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;
}

```