ローディング中に純粋なCSSを使用して数字をアニメ化する

Question

オンラインで入手可能な例の多くからjQueryを使用してこれを行うことができます。しかし、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)); 
     } 
    }); 
}); 

ちょうど私がちょうどアニメーション効果を表示する0から始まることなく、ページのロード上で回転9999場合、私は気にしませんページの読み込み中に

Answer 1

正確にはあなたが探しているものではありませんが、ここではキーフレームを使用した類似の例があります。私は本当にそれはあなたがCSSにのみ:) JSを使用して作成することになるでしょう何かよく分からない

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>

はそれらのもののためにかなり良いです。

Answer 2

上記の1つの肯定回答のようにCSSで行うことは可能ですが、9999のような大きな数字の場合は、CSSを使用するのが賢明ではありません。私はまだJavascript/Jqueryはより良い解決策だと思います。