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/
Top comments (0)