DEV Community

Cover image for How to create a sleek "baseline" animation in CSS under 15 lines of code
manu
manu

Posted on • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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 ; }
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (0)