How can I synchronize the transparency animation of the parent and child elements?

I currently manage a Container-Popup (a Visual Element that contains other child elements) using two classes: Popup-Hide and Popup-Show.

The only difference between Popup-Hide and Popup-Show is that Popup-Hide has a slight transform offset to the top-right and applies an animation over 1 second.

When Popup-Hide is applied and removed, the parent element becomes transparent first, making the child elements appear as if they disappear later.

How can I ensure the child elements fade out naturally at the same time as the parent?
์ œ๋ชฉ ์—†๋Š” ๋™์˜์ƒ - Clipchamp๋กœ ์ œ์ž‘

.Popup-Show {
    width: 35%;
    height: 35%;
    background-image: none;
    position: absolute;
    left: 32.5%;
    top: 32.5%;
    translate: 0 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: all 1s;
}

.Popup-Hide {
    width: 35%;
    height: 35%;
    background-image: none;
    position: absolute;
    left: 32.5%;
    top: 32.5%;
    translate: 5% -5%;
    transition: all 1s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

Hello!

I made a very quick example using your provided USS, and it works well for me. Is there some styling thatโ€™s being applied to the buttons that could affect this? Are you only adding and removing the popup styling to the parent?

1 Like

No, it only applied to the parent object, and the child objects were not affected at all.
Should I apply the class to the child objects as well?