为什么在带有 checked 的类上设置转换完全没有效果？

问：

我尝试创建无 JavaScript 的选项卡。
这奏效了，但现在我想像在 https://web.dev/articles/building/a-tabs-component 上一样进行 CSS 过渡

在那里，它做到了

scroll-behavior: smooth;

我只想以不透明的方式淡入和淡出选项卡。
但这行不通，我不知道为什么。
怎么了？
我不太明白为什么这不起作用，因此，我无法修复它。

我尝试在不透明度、显示、有或没有易进/不移出时设置过渡，它根本没有改变......

我也试过了，但也没有效果。scroll-behavior: smooth;

有关完整示例，请参阅我的 codepen 代码段：https://codepen.io/u155077/pen/oNmgLgM

注意：
这是关于CSS样式的。
请保持它 100% 没有 JavaScript。

    .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;
    }