Removing modal from the code

HTML & CSS
39

How is this fixed?

After I did this: https://jsfiddle.net/kvpga0os/

:not(.hide)>.curtain-containerC  .curtain-leftC{
  transform: translateX(-100%);
}

:not(.hide)>.curtain-containerC .curtain-rightC {
  transform: translateX(100%);
}

.outer-containerA.hide {
  display: block;
  opacity: 0;
  pointer-events: none;
}

Now this is not working:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible),
.outer-containerB .wrapB:not(.wrapB.visible) {
  opacity: 0;
  animation: fadeIn 3s ease-in forwards;
  animation-delay: 700ms;
}

Last time it was working: https://jsfiddle.net/d792vebs/

I tried doing this:

.wrapB.visible,
.outer-containerA .wrapB:not(.wrapB.visible, .hide),
.outer-containerB .wrapB:not(.wrapB.visible, .hide)

It did not work.

That code allowed the videos to fade in:


<div class="containerPageA">

videos not fading in.

<div class="containerPageB">

videos are fading in.

html:

<div class="outer-containerA hide">

<div class="curtain-containerC">
    <div class="slide curtain-leftC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>

    <div class="slide curtain-rightC">
        <div class="inner">
            <div class="container2"></div>
        </div>
    </div>
</div>

    <div class="containerPageA">
        <div class="video-containerB">
            <div class="ratio-keeper ">
                <div class="wrapB">
                    <div class="video playa" data-id=""></div>
                </div>
            </div>
            <div class="playa"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playb" data-id=""></div>
                </div>
            </div>
            <div class="playb"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playc" data-id=""></div>
                </div>
            </div>
            <div class="playc"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playd" data-id=""></div>
                </div>
            </div>
            <div class="playd"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playe" data-id=""></div>
                </div>
            </div>
            <div class="playe" data-id="AxLxnN6z0Og"></div>
        </div>
        <div class="blog-pager">
            <button class="exitC exit" type="button" title="Exit" aria-label="Close"></button>

        </div>

    </div>

    <div class="curtain-containerD hide">
        <div class="slide curtain-leftD">
            <div class="inner">
                <div class="container2"></div>
            </div>
        </div>

        <div class="slide curtain-rightD">
            <div class="inner">
                <div class="container2"></div>
            </div>
        </div>
    </div>

    <div class="containerPageB hide">
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playf" data-id="CHahce95B1g"> </div>
                </div>
            </div>
            <div class="playf"></div>

        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playg" data-id="AxLxnN6z0Og"></div>
                </div>
            </div>
            <div class="playg"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playh" data-id="AxLxnN6z0Og"></div>
                </div>
            </div>
            <div class="playh"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playi" data-id="AxLxnN6z0Og"></div>
                </div>
            </div>
            <div class="playi"></div>
        </div>
        <div class="video-containerB">
            <div class="ratio-keeper">
                <div class="wrapB">
                    <div class="video playj" data-id="AxLxnN6z0Og"></div>
                </div>
            </div>
            <div class="playj"></div>
        </div>
        <div class="blog-pager ">
            <button class="exitD exit" type="button" title="Exit" aria-label="Close"></button>

        </div>
    </div>