JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="circles opened">
  <div class="bigCircle"></div>
  <div class="smallCircle"></div>
</div>

  
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h1>Header element</h1>
      <p>Some paragrah element</p>
    </div>
  </div>
</div>

CSS

body{
  background: grey;
}

.circles {
        &.closing {
            .bigCircle {
                animation: bigCircleIn 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }

            .smallCircle {
                animation: smallCircleIn 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }
        }

        &.opened {
            .bigCircle {
                animation: bigCircleOut 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }

            .smallCircle {
                animation: smallCircleOut 1s 0s;
                animation-iteration-count: 1;
                animation-fill-mode: forwards;
                animation-timing-function: cubic-bezier(.86, 0, .07, 1);
            }
        }

        .bigCircle,
        .smallCircle {
            position: absolute;
            color: white;
        }

        .bigCircle {
            width: 2947px;
            height: 2947px;
            border-radius: 2947px;
            text-align: center;
            background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 62.97%);
            opacity: 0.12;
        }

        .smallCircle {
            width: 1173px;
            height: 1173px;
            border-radius: 1173px;
            opacity: 0.06;
            background: linear-gradient(204deg, #FFF 15.48%, rgba(255, 255, 255, 0.00) 50.01%);
        }
    }

@keyframes bigCircleOut {
  0% {
        left: -28%;
        top: -70px;
    }

    100% {
        left: 100%;
        top: -70px;
    }
}

@keyframes bigCircleIn {
  0% {
        left: 100%;
        top: -70px;
    }

    100% {
       ...

JavaScript

$('.circles').toggleClass('opened closing');