ザ・ベストテンのようなパタパタ表現の作り方

デモ：http://mo49.tokyo/qiita/20160317/

まず数字を表示させる部分を用意

html

<div class="graph graph1">
	<div class="headcount headcount1">
		<!-- 10% -->
		<div class="numbers_move num1 delay1"></div><!-- 1 -->
		<div class="numbers_move delay1"></div><!-- 0 -->
		<div class="percents_move delay1"></div><!-- % -->
	</div>
</div>

スプライト画像をinfiniteでアニメーションさせているという前提。
（デザイナーが大変。。）

scss

$steps_num: 60; /* ステップ数 */
$koma_num: 61px; /* 1ステップで進む距離 */

.numbers_move {
    height: 0;
    padding-top: $koma_num;
    width: 37px;
    overflow: hidden;
    background-image: url(../img/numbers.png);
    background-position: 0 0;
    animation: flip_num 1s steps($steps_num) infinite;
}

@keyframes flip_num{
    0%    { background-position: 0 0; }
    100%  { background-position: 0 (- $koma_num * $steps_num); }
}

/*
以下、パーセントも同じようにスタイル指定
*/

数字を止める位置、遅延時間の設定

scss

/* 
アニメーション最後の100%の位置だと「0」が表示されるので
何ステップ目で止まって欲しいかを指定 
*/
.fix_num1{ background-position: 0 (- $koma_num * 6 * 1); }
.fix_num4{ background-position: 0 (- $koma_num * 6 * 4); }
.fix_num7{ background-position: 0 (- $koma_num * 6 * 7); }

/* アニメーション書き換え infiniteを外す */
.stop_numbers{ animation: flip_num 1s 4 steps($steps_num); }
.stop_percents{ animation: flip_percent 0.2s 20 steps($steps_percent); }

/* load時点での遅延 */
.delay1{ animation-delay: -0.5s; }
.delay2{ animation-delay: -0.3s; }
.delay3{ animation-delay: -0.1s; }
.delay4{ animation-delay: 0.1s; }

/* 
cssアニメーションを書き換えた瞬間の遅延
これで止まる時間に時差が生まれる 
*/
.delay5{ animation-delay: -0.8s; }
.delay6{ animation-delay: -0.2s; }
.delay7{ animation-delay: 0.4s; }
.delay8{ animation-delay: 1s; }

scrollで閾値を越えるとcssアニメーションをストップさせるクラスを付与。
animation-delayでタイミングをずらして止める。

javascript

$(window).on('scroll', function(){
	var $offsetTop = $('.flips_wrapper').offset().top - $(window).height();
	var $windowTop = $(window).scrollTop();
	var $headcount = $('.headcount');
	var $destination = $('.destination');

	if ( $windowTop > $offsetTop + 200 ) {

		// 一度入ったらscrollを切らないと何度もクラスをつけることになってしまうので
		$(window).off('scroll');

		$('.numbers_move').addClass('stop_numbers');
		$('.percents_move').addClass('stop_percents');

		// .delay5-8を付加して遅延させる
		for (var i = 0; i < 4; i++) {
			var delay_id = i + 5;
			var delay = 'delay' + delay_id;
			$headcount.eq(i).children().addClass(delay);
		}

		// アニメーションが終わった瞬間に、最終的に見せたい数字の場所を確定
		$(".stop_numbers").on('animationend webkitAnimationEnd', function(){
			$('.num1').addClass('fix_num1');
			$('.num4').addClass('fix_num4');
			$('.num7').addClass('fix_num7');
		});
		$(".stop_percents").on('animationend webkitAnimationEnd', function(){
			$('.percents_move').addClass('fix_percent');
		});

	}

});

参考
純粋なフリップ時計でよいならばFlipClock.js