How do I fade-in and then fade-out an element using view-transition?

I have an element like this taking up the entire screen:

&::before {
    background-color: #932e10;
    content: '';
    height: 100%;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

How do I make it fade-in and then fade-out using view-transition (cross document)? I've tried everything and I can't make it work... Please help!