一个很奇怪的问题（请各位帮忙解答下,高分相送）

请看49行到53行代码，写了3个执行动作，但奇怪的是只有最后一个“改变透明度”会执行
删去改变透明度代码后，只有第二个执行动作，改变宽高才会执行 
貌似后面的动作把前面覆盖了，真奇怪啊
请各位帮忙解释下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#block{
width:100px;
height:100px;
position:absolute;
top:100px;
left:100px;
background:#F00;
opacity:1;
}
</style>
</head>
<body>
<div id="block"></div>
<script>
//FPS frames per second
var FPS=24;
var SPF=1000/FPS;//Moving distance 
var distance=100;
var opacity=100;
var size=100;//Total times
var period=3;
//Total frames
var frames=FPS*3;
var step=distance/frames;
var sizestep=distance/frames;
var opastep=opacity/frames;
opastep=opastep/100;var block=document.getElementById("block");
var ocurStyle=window.getComputedStyle?window.getComputedStyle(block,null):block.currentStyle;var timer;
//animation execute
function callback(){
if(frames<=0){
clearInterval(timer);
}
var curOpacity=ocurStyle['opacity'];
block.style.left=block.offsetLeft+step+'px';     //改变位置
block.style.top=block.offsetTop+step+'px';
block.style.width=block.offsetWidth-sizestep+'px';   //改变大小
block.style.height=block.offsetHeight-sizestep+'px';
block.style.cssText='opacity:'+(curOpacity-opastep)+';filter:Alpha(Opacity='+(curOpacity*100-opastep*100)+')';    //改变透明度
frames--;
}
timer=setInterval(callback,SPF);
</script>
</body>
</html>