枠が広がっていくようなアニメーションは始点と終点の間を指定されたステップ（数）で除算した値にカウンタ値を乗算します。カウンタ値を増やして乗算することで枠がズームアニメーションしているように見せる事ができます。（サンプルを
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>枠のズームアニメーション</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
x1 = 0; // 最初の左の座標値
y1 = 300; // 最初の上の座標値
x2 = 200; // 最初の右の座標値
y2 = 420; // 最初の下の座標値
step = 10; // ステップ数
stepCount = 0; // ステップ数のカウンタ
function zoomAnimation()
{
var obj = document.getElementById("waku");
var tmpX1 = x1 + ((newX1 - x1)/step) * stepCount;
var tmpY1 = y1 + ((newY1 - y1)/step) * stepCount;
var tmpX2 = x2 + ((newX2 - x2)/step) * stepCount;
var tmpY2 = y2 + ((newY2 - y2)/step) * stepCount;
obj.style.left = tmpX1;
obj.style.top = tmpY1;
obj.style.width = Math.abs(tmpX2 - tmpX1);
obj.style.height = Math.abs(tmpY2 - tmpY1);
if ((tmpX2 - tmpX1) < 0) obj.style.width = 0;
if ((tmpY2 - tmpY1) < 0) obj.style.height = 0;
stepCount++;
document.getElementById("cnt").value = stepCount;
if (stepCount <= step)
{
setTimeout("zoomAnimation()",50);
}else{
obj.style.left = newX1;
obj.style.top = newY1;
obj.style.width = Math.abs(newX2 - newX1);
obj.style.height = Math.abs(newY2-newY1);
if ((tmpX2 - tmpX1) < 0) obj.style.width = 0;
if ((tmpY2 - tmpY1) < 0) obj.style.height = 0;
x1 = newX1;
y1 = newY1;
x2 = newX2;
y2 = newY2;
}
document.getElementById("nx1").value = tmpX1;
document.getElementById("ny1").value = tmpY1;
document.getElementById("nx2").value = tmpX2;
document.getElementById("ny2").value = tmpY2;
}
function setZoomAnimation()
{
newX1 = parseInt(document.getElementById("nx1").value);
newY1 = parseInt(document.getElementById("ny1").value);
newX2 = parseInt(document.getElementById("nx2").value);
newY2 = parseInt(document.getElementById("ny2").value);
step = parseInt(document.getElementById("stp").value);
stepCount = 0;
zoomAnimation();
}
// --></script>
</head>
<body>
<h1>枠のズームアニメーション</h1>
<form>
<input type="button" value="ズーム" onClick="setZoomAnimation()"><br>
(<input type="text" value="200" id="nx1" size="8">,<input type="text" value="200" id="ny1" size="8">)-
(<input type="text" value="600" id="nx2" size="8">,<input type="text" value="400" id="ny2" size="8">)<br>
ステップ数：<input type="text" value="10" id="stp" size="5"><br>
カウント数：<input type="text" value="0" id="cnt" size="5"><br>
</form>
<div id="waku"></div>
</body>
</html>