CSS动画:数字增量效果

我希望在数字快速变化时获得动画效果,例如:http://jsbin.com/kevalutupe/1/

我想单独使用这个CSS(我知道如何在JS中编写代码),我不想使用JS,因为我觉得锤击DOM并不是最好的解决方案.这完全可以用CSS吗？

我并没有对正确递增的数字感到困惑,我只是在效果之后.

使用CSS3动画绝对可以实现数字旋转效果,你还可以使用一小部分JS来设置终点并实际获得整个功能.

方法说明:

div创建A时,通过将其高度和宽度设置为1em,它始终只显示一个数字.将溢出div设置为隐藏,以便只显示一行.

在此范围内,div创建span包含从1到0的所有数字,并相对于父项定位.

该位置的初始位置为span0px或0em,但在animation顶部位置发生变化时,会span产生向上移动的印象.因为一次div只能显示一个数字,所以它会产生旋转效果(或其他数字的效果消失).

通过为每个span元素设置固定的顶部位置来实现最终位置.0em表示第1行可见(编号1),-2em表示第3行可见(编号3),依此类推.

增加或减少动画持续时间将使旋转效果快速或缓慢地发生.动画迭代计数设置为5,以产生微调器旋转多次的错觉.

注意:使用这种方法,旋转看起来像每次都是整个圆圈而不是像所讨论的JSBin样本那样,第一个数字的3到4只是一个步骤,而不是一个完整的圆圈.

div {
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 1em;
  display: inline-block;
}
span {
  position: relative;
}
.animate {
  -webkit-animation: spinit 0.2s 5;
  -moz-animation: spinit 0.2s 5;
  animation: spinit 0.2s 5;
}
@-webkit-keyframes spinit {
  0% {
    top: 0em;
  }
  50% {
    top: -5em;
  }
  100% {
    top: -9em;
  }
}
@-moz-keyframes spinit {
  0% {
    top: 0em;
  }
  50% {
    top: -5em;
  }
  100% {
    top: -9em;
  }
}
@keyframes spinit {
  0% {
    top: 0em;
  }
  50% {
    top: -5em;
  }
  100% {
    top: -9em;
  }
}

/* Setting the required value to top will make the spinner end at that number */

#digit1 {
  top: -4em;
  /* -4em means 5 will be the number */
}
#digit2 {
  top: -2em;
}
#digit3 {
  top: 0em;
}

  1 2 3 4 5 6 7 8 9 0


  1 2 3 4 5 6 7 8 9 0


  1 2 3 4 5 6 7 8 9 0