在加载过程中使用纯CSS动画数字

Question

我从许多在线可用的例子中成功地实现了这一点。但是，我想知道是否可以使用没有任何javascript的纯CSS来完成这个任务。

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

我不介意9999只是在没有从0开始的情况下在页面加载上旋转。我只想在页面加载期间显示动画效果。

Answer 1

不确定这正是您所要寻找的，但是这里有一个类似的使用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>

​

我真的不确定这是不是你只想用css来创建的东西:) js对于那些东西来说是相当不错的。

Answer 2

在CSS中这样做是可能的，就像上面的一个好答案一样，但是如果是针对9999这样的大数字，那么使用CSS并不明智，因为您必须在页面中写出所有这些数字。我认为Javascript/Jquery仍然是更好的解决方案。