こんにちは，
アニメーションの前提知識
HTMLにおける通常のアニメーションを構成するのは，
特定の要素と，
まず，
良くないアニメーション
var y = 0;
var element = document.getElementById('cbjs-17-1');
var id = setInterval(function(){
y++;
element.style.top = y/10 + 'px';
if (y === 1000){
clearInterval(id);
}
}, 1); // 1ms置きに実行
単純計算で言えば，
そこで，
つまり，
修正版アニメーション
var begin = new Date() - 0;
var element = document.getElementById('cbjs-17-2');
var id = setInterval(function(){
var current = new Date() - begin;
if (current > 1000){
clearInterval(id);
current = 1000; // 1000以上になっているので，調整する
}
element.style.top = current / 10 + 'px';
}, 10); // 10ms置きに実行
この方法ではハイスペックな環境では滑らかなアニメーションに，
アニメーションの汎用化とEasing関数
さて，
Easing関数とは，
Easing関数版アニメーション
function easing(time, from, distance, duration){
return distance * time / duration + from;
}
var begin = new Date() - 0;
var element = document.getElementById('cbjs-17-3');
var from = 0; // 初期値
var distance = 100; // 変動値
var duration = 1000; // 継続時間
var id = setInterval(function(){
var time = new Date() - begin; // 経過時間
var current = easing(time, from, distance, duration);
if (time > duration){
clearInterval(id);
current = from + distance;
}
element.style.top = current + 'px';
}, 10); // 10ms置きに実行
easing関数は自作もできますが，
JavaScriptから扱う場合はTweenerのJavaScriptポートである，
easeOutBounce版アニメーション
var easeOutBounce = JSTweener.easingFunctions.easeOutBounce;
var begin = new Date() - 0;
var element = document.getElementById('cbjs-17-3');
var from = 0; // 初期値
var distance = 100; // 変動値
var duration = 1000; // 継続時間
var id = setInterval(function(){
var time = new Date() - begin; // 経過時間
var current = easeOutBounce(time, from, distance, duration);
if (time > duration){
clearInterval(id);
current = from + distance;
}
element.style.top = current + 'px';
}, 10); // 10ms置きに実行
