JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<h2 class="before-test">
  <span class="before-test-text">Congraturations!!</span>
</h2>

<div class="animate skew-test"></div>
<div class="box5">
  <div class="link-btn">
    <a class="btn-slashed pos-r" href="#">
      <span class="slash-ltr-btu slashed"></span>
      <span class="slash-rtl-utb slashed"></span>
      <p class="btn-inner-text">
        Click!
      </p>
    </a>
  </div>
</div>
<div class="animate box1 fade-up delay-1s"></div>
<div class="box2 animate fade-up delay-2s"></div>
<div class="animate box3 delay-3s timing-func-to-fast2"></div>
<a href="#" class="box4 timing-func-to-fast2">
  <p>
    Inner Text
  </p>
</a>
<a href="#" class="box6 timing-func-to-fast2">
  <p>
    Inner Text
  </p>
</a>
<p id="status"></p>

CSS

.before-test {
  background-color: black;
  padding: 0.5rem 1rem;
  position: relative;
}

.before-test-text {
  color: white;
}

.before-test::before {
  content: "";
  position: absolute;
  left: 4vw;
  bottom: -0.8rem;
  width: calc(100% - 4vw);
  height: 100%;
  background: linear-gradient(to right, #6a6fb3 1%, #a46992 50%, #fa6060 100%);
  z-index: -1;
}

.skew-test.is-act::after {
  width: 75%;
  transform: scale(1) skew(14deg, 0deg);
}

.skew-test::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #55c6ff;
  width: 0;
  height: 100%;
  z-index: 10;
  transform: scale(1) skew(0deg, 0deg);
  transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.skew-test {
  background: #3ea2d5;
  color: #FFF;
  position: relative;
  overflow: hidden;
  height: 100px;
}

.fade-up {
  opacity: 0;
  transition: all 1s ease;
  transform: translate3d(0, 100px, 0);
}

.fade-up.is-act {
  opacity: 1;
  transform: translateZ(0);
}

.box1 {
  margin: 12px 0;
  width: 300px;
  height: 100px;
  background-color: cyan;
}

.box2 {
  margin: 12px 0;
  width: 300px;
  height: 100px;
  background-color: yellow;
}

.box3 {
  position: relative;
  margin: 12px 0;
  width: 300px;
  height: 100px;
  background-color: yellow;
  z-index: -1;
}

.box3::after {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transform: scale(0, 1);
  transform-origin: left top;
  background-color: red;
  z-index: 1;
  transition: all 3s;
}

.box3.is-act::after {
  transform: scale(1, 1);
}

.box4 {
  position: relative;
  margin: 12px 0;
  width: 300px;
  height: 100px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 1s;
  color: black;
}

.box4:hover {
  color: white; 
}

.box4::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transform: scale(0, 1);
  transform-origin: left top;
 ...

JavaScript

setTimeout(function() {
	var e = document.getElementsByClassName("animate");
  Array.from(e).forEach((elm) => {
  	elm.classList.add('is-act');
  });
  document.getElementById("status").textContent = "act";
}, 2000);