Why multiple css transitions and transition delay doesn't work together?

Question

I'm trying to run few transitions. one after another(of course not all of them in parallel). But no matter how much I try, nothing works perfectly. If one works, another one breaks.

Expected sequence of my animation:

When the checkbox is checked:

1. The sun will go down to the mentioned pixel with transition.
2. Then the sun will disappear without any transition as this will not be visible and will happen under the semi transparent tree background img and need to be instant.
3. Delay for finishing the sun part.
4. Now the tree background img will be transformed to the black circle with transition. tree background img will fade-out to black, at the same time size will keep shrinking to the black circle. This transition will only start after the sun disappears.

When the checkbox is not checked:

1. The black circle will turn to tree BG img with transition. the BG img will fade-in.
2. Delay to finish the BG img transition.
3. Then the sun will appear under tree BG img in its down position without any transition for instant appearance.
4. Now the sun will rise with transition.

(The tree bg img will be replace after designer sends me the new one. This tree is only for example. The sun position is correct.)

What are the mistakes I'm doing? or is it impossible?

// dont want any js

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 300px;
    height: 200px;
    top: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    background-color: #ccc;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 60px;
    width: 60px;
    left: 220px;
    bottom: 30px;
    border-radius: 50%;
    opacity: 0;
    background-color: hsl(44deg 100% 82%);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.slider:after {
    position: absolute;
    content: "";
    height: 160px;
    width: 160px;
    left: 20px;
    bottom: 20px;
    border-radius: 50%;
    /* opacity: 0; */
    background-image: radial-gradient(black, black);
    /* -webkit-transition: 0.2s; */
    /* transition: 0.2s; */
    
    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;


  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
input:checked + .slider:after {
    height: 200px;
    width: 300px;
    left: 0px;
    bottom: 0px;
    border-radius: 30px;
    background-image: url(https://www.publicdomainpictures.net/pictures/410000/velka/banana-tree-illustration-clipart.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
        
}

input:checked + .slider {
    background-color: #f4ae94;
}

input:focus + .slider {
    box-shadow: 0 0 20px #006A4E;
}

input:checked + .slider:before {
    left: 220px;
    bottom: 120px;
    height: 60px;
    width: 60px;
    opacity: 100;
    box-shadow: 0 0 60px #ffeb3b;
}

<label class="switch">
  <input id="main-switch" type="checkbox" checked>
  <span class="slider"></span>
</label>