JSFiddle - React, Tailwind, and code Playground

by makzan

HTML

<h1 id="animation">
  <span>Happy</span>
  <span>New</span>
  <span>Year</span>
  <span>2022</span>
</h1>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body {
  display: grid;
  place-items: center;
  height: 100vh;
  background: black radial-gradient(rgba(60,60,60), black);
}
#animation {
  font-family: 'Montserrat', Arial Black, sans-serif;
  font-weight: 900;
  font-size: 20vw;
  text-align: center;  
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 1.5em;
}
#animation span {
  --animation-time: 1.6s;
  display: block;
  position: absolute;
  width: 100%;
  transform: translateY(120%);
  animation: moveUpAndGone var(--animation-time);
  animation-fill-mode: forwards;
  text-shadow: 0 0 .1em rgba(255,255,255,.7);
  -webkit-text-stroke: 3px white;
  text-stroke: 3px white;
}
#animation span:nth-child(1){
  animation-delay: calc(var(--animation-time) - 0.1s);
}
#animation span:nth-child(2){
  animation-delay: calc( (var(--animation-time) - 0.1s) * 2);
}
#animation span:nth-child(3){
  animation-delay: calc( (var(--animation-time) - 0.1s) * 3);
}
#animation span:nth-child(4){
  animation-name: moveUp;
  animation-delay: calc( (var(--animation-time) - 0.1s) * 4);
}

@keyframes moveUpAndGone {
  0% { transform: translateY(120%); }
  20% { transform: translateY(0); }
  90% { transform: translateY(0); }
  100% { transform: translateY(-110%); }
}
@keyframes moveUp {
  0% { transform: translateY(120%); }
  20% { transform: translateY(0); }
  100% {transform: translateY(0);}
}


@supports (background-clip: text) {
  #animation span {
    background-image: linear-gradient(
      to bottom right, blue 20%,
      purple 20%, purple 40%,
      yellow 40%, yellow 60%,
      yellowgreen 60%, yellowgreen 80%,
      yellow 80%
    );  
    background-clip: text;
    background-size: 5% 5%;
    color: transparent;        
  }
}

JavaScript

/* Please select "Result" tab to view */