CSS won't transition opacity - html

Question

What I want to do in the bigger picture is delay the popup for a few seconds after page-load using pure CSS. I've decided the best way to do that is by transitioning the opacity, then using transition-delay to delay it for a few seconds.
My problem is that transition doesn't work and won't delay the popup (nor the dark overlay).
Why is that and how can I fix it?
If it's not possible, is there another way to delay the popup for a few seconds?
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;
}
<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>
In the CSS I created two comments "FOR TRANSITION". They mark the opacities I want to transition.

Answer 1

Put the transition on your initial element.
.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;
}

Answer 2

Also make sure to keep the transition always set, only change the opacity to 0 on ~checked.
Also transition-delay must be underneath the transition.
here is the full modified code
.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: 0;
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;*/
transition: opacity 3s;
transition-delay:2s;
pointer-events: none;
}