JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box"></div>
<div class="line"></div>
<div class="text">
  <span>ანკა ყველაზე მაგრად გვიყვარხააარ</span>
</div>

CSS

body {
  background: black;
}
.box {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  animation: a  1s   both ;
  transform-origin: bottom;
  
}
.line {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: darkblue;
  animation: a  1s   both .3s;
  transform-origin: bottom;
}
.text {
  width: 100%;
  height:;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  text-align: center;
}
.text span{
  display: block;
  font-size: 40px;
  color: white;
  transform: translate(0,100%);
  animation: b 1s 1s both;
}
@keyframes a{
  from {
    transform: scaleY(0)
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes b {
  100% {
    transform: translate(0,0);
  }
}