Elaine Byene Elaine Byene -4 years ago 123
jQuery Question

Animate numbers using pure CSS during loading

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download