web-dev-qa-db-ja.com

CSSアニメーション：数値増分効果

数値が急速に変化するときにアニメーション効果を取得したいと思います。例： http://jsbin.com/kevalutupe/1/

私はこのCSSを単独で実行したい（私はJSでそれをコーディングする方法を知っています）、DOMをハンマーで打つことは最良の解決策ではないと感じるので、JSを使用したくありません。これはCSSでまったく可能ですか？

私は実際に数字が正しく増加することに悩まされていません、私は効果の直後です。

cssanimationcss-animations
13
ditto

CSS3アニメーションを使用すると、数字の回転効果が最も確実に可能になります。さらに、ほんの少しのJSを使用してエンドポイントを設定し、実際に機能全体を取得することもできます。

メソッドの説明：

  1. divは、高さと幅を1emに設定して常に1つの数値のみを表示するように作成されます。 divのオーバーフローは非表示に設定され、1行だけが表示されます。
  2. このdiv内に、1から0までのすべての数値を含むspanが作成され、親に対して相対的に配置されます。
  3. spanの初期位置は0pxまたは0emですが、animationの間は、spanが上に移動したように見えるように上部位置が変更されます。 divは一度に1つの数値しか表示できないため、回転効果（または他の数値が消える効果）が得られます。
  4. 最終位置は、span要素のそれぞれに固定上部位置を設定することによって達成されます。 0emは1行目が表示される（番号1）、-2emは3行目が表示される（番号3）という意味です。
  5. アニメーションの継続時間を増減すると、スピン効果が速くまたは遅くなります。アニメーションの反復回数は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;
}
<div>
  <span class="animate" id='digit1'>1 2 3 4 5 6 7 8 9 0</span>
</div>
<div>
  <span class="animate" id='digit2'>1 2 3 4 5 6 7 8 9 0</span>
</div>
<div>
  <span class="animate" id='digit3'>1 2 3 4 5 6 7 8 9 0</span>
</div>

以下はJavaScriptを使用したサンプルで、アニメーション効果はCSSを介して実現されますが、アニメーションのトリガーとエンドポイントの設定はJavaScriptを使用して実現されます。

JSコードは自明です。私たちがしていることはすべて次のとおりです。

  1. ボタンのクリックイベントのリスナーを作成し、その中にanimateクラスをこのアニメーション効果の一部であるすべてのspan要素に追加します。これは、ボタンをクリックしたときにのみアニメーションが発生するようにするためです。
  2. アニメーションが終了する（またはスピンが完了する）と、各topのspanプロパティに乱数が設定されます。つまり、スパンごとに異なる数値が表示されます。
  3. アニメーションの最後に、別の関数を呼び出してanimateクラスを削除し、ボタンをもう一度クリックすると、アニメーションを最初からやり直すことができるようにします。
window.onload = function() {
  var spinner = document.getElementById('spinner');
  spinner.onclick = spinit;

  var el = document.querySelectorAll("span[id*=digit]");
  for (i = 0; i < el.length; i++) {
    el[i].addEventListener("animationend", randomize, false);
    el[i].addEventListener("webkitAnimationEnd", randomize, false);
    el[i].addEventListener("oanimationend", randomize, false);
    el[i].addEventListener("MSAnimationEnd", randomize, false);
  }
}

function randomize() {
  var Rand = Math.floor(Math.random() * 9);
  this.style.top = -1 * Rand + "em";
  this.classList.toggle('animate');
}

function spinit() {
  var el = document.querySelectorAll("span[id*=digit]");
  for (i = 0; i < el.length; i++) {
    el[i].classList.toggle('animate');
  }
}
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;
  }
}

/* Set the value according to the on-load position of the spinner */

#digit1 {
  top: -4em;
  /* -4em means 5 will be the number */
}
#digit2 {
  top: -2em;
}
#digit3 {
  top: 0em;
}
<div>
  <span id='digit1'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<div>
  <span id='digit2'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<div>
  <span id='digit3'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<button id='spinner'>Spin It</button>

バージョン2：（スピニングエフェクトではなく、数値インクリメントエフェクトのみ）

これは前のコードとほぼ同じコードを使用して作成されますが、animationがある数値から別の数値への移動を段階的なものにする（それによりスピン効果を生成する）以前のコードとは異なり、ここでアニメーションはある番号から別の番号への突然のジャンプのような動きにより、増分効果を生み出します。

ジャンプは、次に移動するちょうどその時までtopの位置を同じに維持することで達成されます（つまり、topは、9.9％まで0emに設定されますアニメーションですが、10％になると突然-1emに変わります）。

window.onload = function() {
  var spinner = document.getElementById('spinner');
  spinner.onclick = spinit;

  var el = document.querySelectorAll("span[id*=digit]");
  for (i = 0; i < el.length; i++) {
    el[i].addEventListener("animationend", randomize, false);
    el[i].addEventListener("webkitAnimationEnd", randomize, false);
    el[i].addEventListener("oanimationend", randomize, false);
    el[i].addEventListener("MSAnimationEnd", randomize, false);
  }
}

function randomize() {
  var Rand = Math.floor(Math.random() * 9);
  this.style.top = -1 * Rand + "em";
  this.classList.toggle('animate');
}

function spinit() {
  var el = document.querySelectorAll("span[id*=digit]");
  for (i = 0; i < el.length; i++) {
    el[i].classList.toggle('animate');
  }
}
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; }
  9.9% { top: 0em; }
  10%{ top: -1em; }
  19.9%{ top: -1em; }
  20%{ top: -2em; }
  29.9%{ top: -2em; }
  30%{ top: -3em; }
  39.9%{ top: -3em; }
  40%{ top: -4em; }
  49.9%{ top: -4em; }
  50% { top: -5em; }
  59.9%{ top: -5em; }
  60%{ top: -6em; }
  69.9%{ top: -6em; }
  70%{ top: -7em; }
  79.9%{ top: -7em; }
  80%{ top: -8em; }
  89.9%{ top: -8em; }
  90%{ top: -9em; }
  99.9%{ top: -9em; }
  100% { top: -9em; }
}
@-moz-keyframes spinit {
  0% { top: 0em; }
  9.9% { top: 0em; }
  10%{ top: -1em; }
  19.9%{ top: -1em; }
  20%{ top: -2em; }
  29.9%{ top: -2em; }
  30%{ top: -3em; }
  39.9%{ top: -3em; }
  40%{ top: -4em; }
  49.9%{ top: -4em; }
  50% { top: -5em; }
  59.9%{ top: -5em; }
  60%{ top: -6em; }
  69.9%{ top: -6em; }
  70%{ top: -7em; }
  79.9%{ top: -7em; }
  80%{ top: -8em; }
  89.9%{ top: -8em; }
  90%{ top: -9em; }
  99.9%{ top: -9em; }
  100% { top: -9em; }
}
@keyframes spinit {
  0% { top: 0em; }
  9.9% { top: 0em; }
  10%{ top: -1em; }
  19.9%{ top: -1em; }
  20%{ top: -2em; }
  29.9%{ top: -2em; }
  30%{ top: -3em; }
  39.9%{ top: -3em; }
  40%{ top: -4em; }
  49.9%{ top: -4em; }
  50% { top: -5em; }
  59.9%{ top: -5em; }
  60%{ top: -6em; }
  69.9%{ top: -6em; }
  70%{ top: -7em; }
  79.9%{ top: -7em; }
  80%{ top: -8em; }
  89.9%{ top: -8em; }
  90%{ top: -9em; }
  99.9%{ top: -9em; }
  100% { top: -9em; }
}

/* Set the value according to the on-load position of the spinner */

#digit1 {
  top: -4em;
  /* -4em means 5 will be the number */
}
#digit2 {
  top: -2em;
}
#digit3 {
  top: 0em;
}
<div>
  <span id='digit1'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<div>
  <span id='digit2'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<div>
  <span id='digit3'>1 2 3 4 5 6 7 8 9 0</span>
</div>

<button id='spinner'>Spin It</button>
28
Harry