在加载期间使用纯 CSS 动画数字

Question

我设法通过 jQuery 从许多在线示例中实现了这一点。但是，我想知道是否可以使用没有任何 javascript.

的纯 CSS 来做到这一点

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

不确定这正是您要查找的内容，但这里有一个使用关键帧的类似示例。

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 仍然是更好的解决方案。

在加载期间使用纯 CSS 动画数字

Animate numbers using pure CSS during loading

css

jquery

css-transitions

css-transforms