Why does setting a transition on a class with checked have absolutely no effect?

I tried to create JavaScript-less tabs.
That worked, but now I want to have a CSS-transition like on https://web.dev/articles/building/a-tabs-component

there it does it with

scroll-behavior: smooth;

I wanted to just fade-in and fade-out the tab with opacity.
But that doesn't work, and I have no idea why.
What's the matter ?
I don't quite understand why this doesn't work, and consequently, i can't fix it.

I tried setting transition on opacity, display, with or without ease-in/out and it simply does not change at all ...

I also tried with scroll-behavior: smooth; but that has no effect either.

See my codepen snippet for a full example: https://codepen.io/u155077/pen/oNmgLgM

Note:
This is about CSS-styles.
Please keep it 100% JavaScript-free.

    .rbTab
    {
        display: none;
        opacity: 0;
        transition: opacity 5s, display 1s;
    }




   .ContentTab
    {
        display: none;
        width: 630px;
        height: 180px;
        background-color: #FFFFFF;
    }
    
    
    .TitleTab
    {
        width: 630px;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
        /*background-color: #E5E5E5;*/
    }


    .rbTab
    {
        display: none;
        opacity: 0;

    }
    
    
    .rbTab1:checked ~ .ContentTab1
    {
        display: block;
        opacity: 1;


        -webkit-transition: display 2s ease-in;
        -moz-transition: display 2s ease-in;
        -o-transition: display 2s ease-in;
        transition: display 2s ease-in;
    }
    
    .rbTab2:checked ~ .ContentTab2
    {
        display: block;
        opacity: 1;


        -webkit-transition: display 2s ease-in;
        -moz-transition: display 2s ease-in;
        -o-transition: display 2s ease-in;
        transition: display 2s ease-in;
    }


    .rbTab3:checked ~ .ContentTab3
    {
        display: block;
        opacity: 1;
    }


    .rbTab4:checked ~ .ContentTab4
    {
        display: block;
        opacity: 1;
    }


    .rbTab5:checked ~ .ContentTab5
    {
        display: block;
        opacity: 1;
    }


    .rbTab6:checked ~ .ContentTab6
    {
        display: block;
        opacity: 1;
    }

Solution

You can't animate the opacity of the elements the way you want when they don't have same position. What you are doing is like removing the old element and adding the new one.

You can put all Tabs in a div container, set the size of the container, change the tabs to position: absolute;, remove display: none; from the class ContentTab and add the transition to the class ContentTab.

I have modified your example: https://codepen.io/untbu/pen/zYexoGv