CSS不会过渡不透明

Question

我想在更大的范围内做的是使用纯CSS在页面加载后将弹出窗口延迟几秒钟。我已经确定最好的方法是过渡不透明度，然后使用transition-delay延迟几秒钟。我的问题是过渡无法正常工作，并且不会延迟弹出窗口（也不会覆盖黑色的叠加层）。

1. 为什么会这样，我该如何解决？
2. 如果不可能，还有另一种方法可以将弹出窗口延迟几秒钟吗？

<label for="modal1">
<div id="css-only-modals">
    <input id="modal1" class="css-only-modal-check" type="checkbox" checked/>
    <div class="css-only-modal">
        <label for="modal1" class="css-only-modal-close"><i class="fa fa-times fa-2x"></i></label>
        <h2>Referral</h2>
        <hr />
        <p>Refer a customer, email me and receive a 25% commission. <br> Earn up to 1225$ from a single referral!</p>
        <hr />
        <label for="modal1" class="css-only-modal-btn">NICE!</label>
    </div>
    <div id="screen-shade"></div>
</div>
</label>

在下面的CSS中，我创建了两个注释“ FOR TRANSITION”。它们标志着我要过渡的不透明状态。

hr {
    clear: both;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-top: 1px solid #aaaaaa;
}

#css-only-modals {
    position: fixed;
    pointer-events: none;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000000;
    text-align: center;
    white-space: nowrap;
    height: 100%;
}

#css-only-modals:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.css-only-modal-check {
    pointer-events: auto;
}

.css-only-modal-check:checked ~ .css-only-modal {
    /* FOR TRANSITION */
    opacity: 1;
    transition: opacity 3s;  /*NOT WORKING */
    pointer-events: auto;
}

.css-only-modal {
    width: 360px;
    background: #FFF;
    z-index: 1;
    display: inline-block;
    position: relative;
    pointer-events: auto;
    padding: 25px;
    text-align: right;
    border-radius: 4px;
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    pointer-events: none;
}

.css-only-modal h2 {
    text-align: left;
    color: #1A1A1C;
}

.css-only-modal p {
    text-align: left;
}

.css-only-modal-close {
    position: absolute;
    top: 25px;
    right: 25px;
}

.css-only-modal-check {
    display: none;
}

.css-only-modal-check:checked ~ #screen-shade {
    /* FOR TRANSITION */
    opacity: 0.5;
    transition: opacity 3s; /*NOT WORKING */
    pointer-events: auto;
}


#screen-shade {
    opacity: 0;
    background: #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    transition: opacity 0.8s;
}

.stripe > .container > p,
.stripe > .container > ul {
    text-align: left;
    padding: 35px;
    margin: 0;
}

#nav-spacer {
    display: block;
    height: 50px;
}

.stripe {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.css-only-modal-btn{
    background-color: #BD2C15;
    color: white;
    padding: 8px 18px;
    letter-spacing: 0.5px;
}

.css-only-modal-btn:hover{
    color: #BD2C15;
    background-color: transparent;
    outline: 2px solid #BD2C15;
    transition: background-color 0.5s, color 0.5s;
}

Answer 1

这没有意义应该是

transition:3s;
opacity:0;

还请确保始终设置过渡，仅在选中时将不透明度更改为0。

也过渡延迟必须在过渡之下。

Answer 2

将过渡放在初始元素上。

.css-only-modal-check {
    pointer-events: auto;
}


.css-only-modal-check ~ .css-only-modal {
    /* FOR TRANSITION */
    transition: opacity 3s; 
}

.css-only-modal-check:checked ~ .css-only-modal {
    opacity: 1;
    pointer-events: auto;
}

.css-only-modal {
    width: 360px;
    background: #FFF;
    z-index: 1;
    display: inline-block;
    position: relative;
    pointer-events: auto;
    padding: 25px;
    text-align: right;
    border-radius: 4px;
    white-space: normal;
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    pointer-events: none;
}