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/