animation - CSS fade out transition between pages

Question

I'd like to make a transition between two pages using only CSS.

I tried two solutions :

1. Once we clic on the button I use the pseuo element "active" and I create a transition with the opacity of my .body (.full_width in my case) to make disappear the whole page.

.button {
&:active + .full_width {
opacity: 0;
transition: opacity 2s;
}
}

When I try this CSS without the condition it works perfectly, my page beautifully disappears. But when I put the "active" condition it's not working.

2. I created a :after of my button with no content, but a background that takes the whole screen

.button::after {
    content:'';
    position: fixed;
    z-index: -10;
    top: 0;
    bottom: 0;
    right:0;
    left:0;
    width: 100%;
    opacity: 0;
    background-color: #DFE3E5;
    transition: opacity 2s;
} 

And then, when I activate the button, I change the z-index to bring the ::after in the foreground and change the opacity. The animation works perfectly once again, but my link doesn't work. It doesn't load the new page.

.button:active::after
{
    z-index: 1;
  opacity: 1;
}

Do you have any idea how to solve my issue ? I am so close it's very frustrating ^^

Thank you !

question from:https://stackoverflow.com/questions/65924129/css-fade-out-transition-between-pages

Answer 1

Waitting for answers