Pure CSS Number Counter Animation

Spread the love

A number counting is one of the useful text animations to show some creativity on the webpage. Basically, there are a number of JavaScript/jQuery plugins to make a number counter animation. But, how about a pure CSS number counter animation? Well! in this tutorial, I’m going to share a trick to create a number counting illusion using CSS only.

I said that animation is an illusion because it’s not a real number counter because we are not using the JavaScript increment function. Anyhow it shows real numbers after animating some fake digits. So, what’s behind the scene? well! before going to expose the trick, I would suggest you check out the demo page to see the number counter animation.

As you have seen on the demo page, the counting looks almost realistic due to the animation speed. Well! it’s just the movement of some digits that we have given in attributes. These numbers are moved from one side to another and show one digit at a time, that’s it.

This kind of number counting is useful to show some random numbers, like a lucky draw or random number/text generator somewhere on a webpage. It can also be used to show numbers data like the number of users, projects, tasks, etc on a portfolio page. So, let’s get started with HTML to create a number counting animation.

The HTML Structure

In HTML, create a div element with a class name "number" and place 3 span tags inside it with a class name "numbers__window". Define the "data-fake" attribute and place some random number inside each span element. Likewise, place the accurate number inside the span tag.

<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>

Place the above HTML structure where you want to animate numbers.

CSS Styles for Number Counter Animation

In CSS, target the "numbers" class and define font-family, font size, and line-height as mentioned below. Here the important property is the overflow that must be hidden to forbade the numbers to overlap. So, define the CSS overflow property and keep its value hidden.

.numbers {
  font-family: 'Arial', sans-serif;
  font-size: 150px;
  line-height: 1em;
  text-align: center;
  margin: 40px auto;
  overflow: hidden;
}

The "numbers__window" class is the container element for each number. Display it as an inline-block element and keep its overflow hidden. Similarly, define its width and height as follows:

.numbers__window {
  display: inline-block;
  overflow: hidden;
  width: 0.5em;
  height: 1em;
}

After that, select the "numbers__window__digit" class that wraps each digit. Display it as a block element, define 0 value for width and specify inherit value for both font and overflow property. Likewise, define the counting animation with the “steps(10) forwards infinite” value.

.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;
}

Similarly, select the "numbers__window__digit" with before pseudo-class and define content value pointing to the data-fake attribute. Specify display property, 100% value for width, and keep the auto height.

.numbers__window__digit::before {
  content: attr(data-fake);
  display: inline-block;
  width: 100%;
  height: auto;
}

Now, we’ll move each digit using CSS3 keyframes. So, define the keyframes for "counting" animation and use the CSS translate3d for transform property as follows:

@keyframes counting {
  100% {
    transform: translate3d(0, -10em, 0);
  }
}

Now we’ll make random animation for each digit. To do so, select digit–1 to digit–6 class and define animation-iteration-count property as follows:

.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;
}

That’s all! I hope now you are able to create a pure CSS number counter animation. If you have any questions or suggestions, let me know by comment below.

Share it!

You May Also Like

Leave a Comment