JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container-off">
  <div class="flipper">
    <div class="front">
      <div class="image">
        <img id="login_image" src="https://upload.wikimedia.org/wikipedia/commons/6/62/Warmfront.jpg">
      </div>
      <img id="car1" src="{{ baseUrl }}public/images/login_page/car.png">
    </div>
    <div class="back">
      <div class="image">
        <img id="login_image" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Coldfront.jpg">
      </div>
      <img class="cloud-animation-off" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Human-gnome-dev-media-sdmmc.svg/128px-Human-gnome-dev-media-sdmmc.svg.png">
    </div>
  </div>
</div>
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>

CSS

/* flip the pane when hovered */
    .flip-container-on .flipper, .flip-container-on .flipper {
        -webkit-transition-delay: 1.5s;
        transform: rotateY(180deg);
    }

    .flip-container-on, .front, .back {
        width: 320px;
    }

    /* flip speed goes here */
    .flipper {
        transition: 2s;
        transform-style: preserve-3d;

        position: relative;
    }
    
    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    /* front pane, placed above back */
    .front {
        z-index: 2;
        /* for firefox 31 */
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
        -o-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }

    /* back, initially hidden pane */
    .back {
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
        -o-transform:rotateY(180deg);
        transform:rotateY(180deg);
    }

    .cloud-animation-off {
      display:none;
    }

    .cloud-animation {
        display: initial;
        left: 52px;
        position: absolute;
        top: 101px;
        animation: animationFrames linear 90s;
        animation-iteration-count: infinite;
        transform-origin: 50% 50%;
        -webkit-animation: animationFrames linear 90s;
        -webkit-animation-iteration-count: infinite;
        -webkit-transform-origin: 50% 50%;
        -moz-animation: animationFrames linear 90s;
        -moz-animation-iteration-count: infinite;
        -moz-transform-origin: 50% 50%;
        -o-animation: animationFrames linear 90s;
        -o-animation-iteration-count: infinite;
        -o-transform-origin: 50% 50%;
        -ms-animation: animationFrames linear 90s;
        -ms-animation-iteration-count: infinite;
        -ms-transform-origin: 50% 50%;
        -webkit-transition-delay: 2s;
   ...

JavaScript

$(function () {
        setTimeout(function () {
            $('.flip-container-off').addClass('flip-container-on');
            $('.flip-container-off').removeClass('flip-container-off');
            setTimeout(function () {
$('.cloud-animation-off').hide().addClass('cloud-animation').removeClass('cloud-animation-off').show(1000);
            }, 500);
        },1000);
});