Animieren von Zahlen mit reinem CSS während des Ladens

Ich schaffe es aus vielen der online verfügbaren Beispiele mit jQuery. Ich frage mich jedoch, ob es möglich ist, dies mit reinem CSS ohne Javascript zu tun.Animieren von Zahlen mit reinem CSS während des Ladens

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

ich nichts dagegen, wenn 9999 auf Seite Last dreht sich nur, ohne von 0 beginnend Ich möchte nur den Animationseffekt zeigen während des Ladens der Seite.

Quelle

2017-02-27 Elaine Byene

Was meinst du mit dreht? Du könntest divs mit 1-9999 haben und sie dann verstecken, aber das scheint ein wenig nervig zu sein. –

(oder mögliches Duplikat von) - http://stackoverflow.com/questions/27956723/css-animation-number-increment-effect/27956997#27956997? – Harry

Nicht sicher, es ist genau das, was Sie suchen, aber hier ist ein Beispiel für etwas ähnliches mit 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>

Ich bin wirklich nicht sicher, ob es etwas ist, Sie CSS erstellen verwenden wollen, werden nur :) js ist für die Dinge ziemlich gut.

Quelle

2017-02-27 00:35:08 Dekel

Danke. Das ist ein schrecklicher Weg, es zu tun. Ich denke, ich bleibe bei Javascript und vermeide css dafür. Ich werde dies als richtige Antwort markieren. –

Ich stimme zu. Es macht nicht wirklich Sinn (wie auch immer Sie gefragt haben, ob es möglich ist, also ist die Antwort "ja"). – Dekel

Es ist möglich, es in CSS wie in einer guten Antwort oben zu tun, aber wenn es für große Zahlen wie 9999 sein wird, ist es nicht vernünftig, CSS zu verwenden, weil Sie alle diese Zahlen auf Ihrer Seite schreiben müssen. Ich halte Javascript/Jquery immer noch für die bessere Lösung.

Quelle

2017-02-27 00:47:47

Sie sind herzlich eingeladen, meine Antwort zu verbessern :) – Dekel

Ja, Ihre Antwort verdienen mein upvote! –

Vielen Dank. Ich habe auch deine @Ev aufgewertet –

Animieren von Zahlen mit reinem CSS während des Ladens

Antwort

Verwandte Themen