In this tutorial, we will see how to create number counter animation using pure CSS without using JavaScript. A number counting animation is one of the useful text animations to put up on the webpage. You may easily find many other tutorials online that have implemented the animation on number counter using the JavaScript/jQuery but, this tutorial will be helping you develop the counter using CSS only.
The animation which we will be creating is just a movement of some digits that we already will be assigning in the code. This kind of number counting is useful to show random numbers, like a lucky draw or random number/text generator on a webpage. It can also be used to show data like the number of users, projects, tasks, No. of Students, Employees Count, or for awards count etc. on a portfolio page. So, let’s start with the HTML first and then we can add CSS to create a number counting animation.
Table of Contents
HTML/CSS Number Counter Animations – Code
HTML
<div class="numbers">
<span class="numbers__window">
<span class="numbers__window__digit numbers__window__digit--1" data-fake="8642519073">8</span>
</span>
<span class="numbers__window">
<span class="numbers__window__digit numbers__window__digit--2" data-fake="5207186394">5</span>
</span>
<span class="numbers__window">
<span class="numbers__window__digit numbers__window__digit--3" data-fake="8395216407">2</span>
</span>
</div>
CSS
.numbers {
font-family: 'Arial', sans-serif;
font-size: 150px;
line-height: 1em;
text-align: center;
margin: 40px auto;
overflow: hidden;
}
.numbers__window {
display: inline-block;
overflow: hidden;
width: 0.5em;
height: 1em;
}
.numbers__window__digit {
font: inherit;
word-break: break-all;
display: block;
width: 0;
padding: 0 0.52em 0 0;
margin: 0 auto;
overflow: inherit;
animation: counting 0.4s steps(10) forwards infinite;
}
.numbers__window__digit::before {
content: attr(data-fake);
display: inline-block;
width: 100%;
height: auto;
}
@keyframes counting {
100% {
transform: translate3d(0, -10em, 0);
}
}
.numbers__window__digit--1 {
animation-iteration-count: 3;
}
.numbers__window__digit--2 {
animation-iteration-count: 6;
}
.numbers__window__digit--3 {
animation-iteration-count: 9;
}
.numbers__window__digit--4 {
animation-iteration-count: 12;
}
.numbers__window__digit--5 {
animation-iteration-count: 15;
}
We’ll move each digit using CSS3 keyframes to make random animations for each digit. So, we have defined the keyframes in above CSS code box for “counting” animation and used the translate3d transform property of CSS.
That’s all! Hope now you were able to create a pure CSS number counter animation. If you have any questions or suggestions to improve the above counter, let us know by commenting below.