Simple blinking cursor animation using CSS
The other day I was feeling a little nerdy (like all the cool kids) and so, I attempted to add this cool-looking blinking cursor at the end of my blog’s tagline like so.
Turns out it’s rather quite easy to implement something like this. In a nutshell, it’s a combination of the ::after pseudo-element and a pinch of CSS animation timing using the steps() function.
If you want to learn how it can be done, read on!
Using the ::after pseudo element
The first and foremost thing is to add a static cursor. And the way to do it is by using the ::after pseudo-element to the element after which you want the cursor.
So, for instance, if you want to place it at the end of a <h2>, you can use the ::after pseudo-element like so.
.box h2::after {
content: "";
width: 5px;
height: 20px;
background: #ec7fff;
display: inline-block;
}
The result would look like so.
See the Pen Simple Cursor Blink Animation by Amit Merchant (@amit_merchant) on CodePen.
As you can tell, I have used the flexbox in order to make the text and the cursor align properly and have proper spacing between them.
.box h2 {
display: flex;
align-items: center;
gap: 2px;
}
Once that is done, it’s time to animate the cursor.
You may like: Animated gradient text in CSS
Animating the cursor
To animate the cursor, first, we need to define a keyframe called cursor-blink that will reduce the opacity of the cursor to 0 when the keyframe is “0%”.
@keyframes cursor-blink {
0% {
opacity: 0;
}
}
Once done, we can now use this keyframe on the cursor using the animation shorthand like so.
.box h2::after {
/*code commented for brevity*/
animation: cursor-blink 1.5s steps(2) infinite;
}
Let’s break this down!
The cursor-blink animation we previously defined will run infinitely at each duration of 1.5 seconds and the animation-timing-function would take care of the animation iterations in form of steps(2) which essentially means it will display the animation iteration along 2 stops along with the entire transition.
The final output
Here’s how the final output looks like once everything is put together.
See the Pen Simple Cursor Blink Animation by Amit Merchant (@amit_merchant) on CodePen.
Like this article? Consider leaving a
Tip
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
