Animate numbers using pure CSS during loading

Question

I manage to get this going with jQuery from many of the examples available online. However, I'm wondering if it's possible to do this using pure CSS without any javascript.

JSFiddle DEMO

HTML

<span class="count">9999</span>

jQuery

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

I don't mind if 9999 just rotates on page load without starting from 0. I just want to show the animation effect during the page load.

What do you mean by rotates? You could have divs containing 1-9999 then hide them, but that seems a little annoying. — Chris Happy
– Chris Happy, Commented Feb 27, 2017 at 0:16
Related (or possible duplicate of) - stackoverflow.com/questions/27956723/…? — Harry
– Harry, Commented Feb 28, 2017 at 6:29

Dekel · Accepted Answer · 2017-02-27 00:35:08Z

3

Not sure it's exactly what you are looking for, but here is an example of something similar using keyframe.

div.a {
  width: 50px;
  text-align: right;
  height: 20px;
  overflow: hidden;
}
div.a ul {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: anim 5s forwards;
  animation-iteration-count: 1;
  line-height: 20px;
}
@keyframes anim {
  0% {
    margin-top: 0;
  }
  1%{
    margin-top: -20px;
  }
  4% {
    margin-top: -20px;
  }
  5% {
    margin-top: -40px;
  }
  8% {
    margin-top: -40px;
  }
  9% {
    margin-top: -60px;
  }
  12% {
    margin-top: -60px;
  }
  13% {
    margin-top: -80px;
  }
  16% {
    margin-top: -80px;
  }
  17% {
    margin-top: -100px;
  }
  20% {
    margin-top: -100px;
  }
  21% {
    margin-top: -120px;
  }
  24% {
    margin-top: -120px;
  }
  25% {
    margin-top: -140px;
  }
  28% {
    margin-top: -140px;
  }
  29% {
    margin-top: -160px;
  }
  32% {
    margin-top: -160px;
  }
  33% {
    margin-top: -180px;
  }
  36% {
    margin-top: -180px;
  }
  37% {
    margin-top: -200px;
  }
  40% {
    margin-top: -200px;
  }
  100% {
    margin-top: -200px;
  }
}

<div class="a">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
  </ul>
</div>

I'm really not sure it's something you will want to create using css only :) js is pretty good for those things.

answered Feb 27, 2017 at 0:35

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elaine Byene Over a year ago

Thank you. That's a terrible way to do it. I guess i'll stick to Javascript and avoid css for this. I will mark this as correct answer.

Dekel Over a year ago

I agree. It doesn't really makes sense (however you asked if it's possible, so the answer is "yes").

Evrard-c · Accepted Answer · 2017-02-28 11:27:56Z

1

It's possible to do it in CSS like in one good answer above but if it will be for big numbers like 9999 it not judicious to use CSS because you'll have to write all those numbers in your page. I think Javascript/Jquery still the better solution.

edited Feb 28, 2017 at 11:27

answered Feb 27, 2017 at 0:47

Evrard-c

5315 silver badges15 bronze badges

Collectives™ on Stack Overflow

Animate numbers using pure CSS during loading

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related