Fade to color, move clouds

A duplicate grayscale of the image fades away as logo fades in and clouds start to move.

by akmiecik

HTML

<div id="motion_container">
<span id="Nova_Logo"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/Nova-Logo-1-v3.png" alt=""
width="25%" class="alignnone size-full wp-image-18" /></span>
        <div id="gray_scale" class="background"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3-grayscale-truck.jpg" alt=""  width="100%" class="wp-image-54" /></div>
        <div id="truck" class="background"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3-Good-truck.png" alt="" width="100%"  class="alignnone wp-image-58" /></div>
        <div id="clouds1" class="clouds"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3-Cloud-1.png" alt="" width="100%"  class="alignnone wp-image-56" /></div>
        <div id="clouds2" class="clouds"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3Cloud-2.png" alt="" width="100%"  class="alignnone wp-image-55" /></div>
         <div id="clouds3" class="clouds"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3-Cloud-3.png" alt="" width="100%"  class="alignnone wp-image-57" /></div>
        <div id="backdrop" class="background"><img src="https://beta.novaenergyventures.com/wp-content/uploads/2024/01/V3-Backdrop.jpg" alt="" width="100%"  class="alignnone wp-image-53" /></div>
<h1 class="tag_line">helping petroleum marketers <br>uncover profitability</h1>
    </div>

CSS

img.alignnone.size-full.wp-image-18 {
    position: absolute;
    z-index: 4;
    top: 5%;
    left: 30px;
}

h1.tag_line {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 18px;
    bottom: -40vh;
    left: 2vw;
    color: #fff;
    z-index: 9;
    text-align: right;
    letter-spacing: 2px;
    animation: fadeIn 10s;
    animation-fill-mode: forwards;
    padding: 15px;
    width: 36%;
    font-size: 1em;
}


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

.background, .clouds {
            position: absolute;
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
 }
 #gray_scale{
            z-index: 5;
            animation: fadeOut 10s;
             animation-fill-mode: forwards;
        }
 
@keyframes fadeOut {
            0% { opacity: 1; }
            100%  { opacity: 0; }
        }
#backdrop{
            z-index: 0;
        }
#truck{
            z-index: 4;
        }
#clouds1,#clouds2, #clouds3 {

            z-index: 1;
            animation: moveClouds 200s ease-in-out infinite;
            animation-delay: 1s;
        }

        @keyframes moveClouds {
  0% {
    left: 0;
  }
  25% {
    left: 300px;
  }
    75% {
    left: -300px;    
  }
    100% {
    left: 0;    
  }
        }