How to create a sleek "baseline" animation in CSS under 15 lines of code

Off late, I've been obsessed with this trend in web pages. I saw this animation in Canva. Here's how to make it:

Step 1

Let's create some HTML. We'll need a span element.

<h1>  <span class="text">Hello, World!</span></h1>

Step 2

Let's create some CSS

h1 {  overflow: hidden;}h1 .text {  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;  display: inline-block;  animation: baseline 0.5s forwards cubic-bezier(.4,0,.39,1.04);}@keyframes baseline {  0% { transform: translateY(140%); }  100% { transform: translateY(0); }}/* Just for basic styles */html {  height: 100vh;  display: flex;  justify-content: center;  align-items: center;}body {  color: white;  background: #37474f  ; }

Explained

• font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; - This is just for fancy stuff
• display: inline-block; - We'll need this to animate the transform property
• @keyframes baseline - This is the defined animation
• overflow:hidden - Hides the overflow of the header

Great! You've successfully made a baseline CSS animation. Hit the button if you liked this post!
Demo: https://jsfiddle.net/ManuTheCoder/xao1s6kd/68/