simple, набросал пример (работате только в хроме)
<!DOCTYPE HTML>
<html>
<head> <style>
#t{
width:500px;
height:500px;
background-color:red;
}
</style></head>
<body>
<a href="#" id="go">start</a>
<div id="t"></div>
<script>
function Reduce(param)
{
var scale = param.scale.start - 0.1;
function _reduce() {
if(scale < param.scale.to){
scale = param.scale.to;
}
param.object.style.WebkitTransform = "scale("+scale+")";
scale -= 0.1;
if(scale != param.scale.to)
setTimeout(_reduce, 40);
};
this.Start = function () {
_reduce();
};
}
var reduce = new Reduce({
object: document.getElementById("t"),
scale:{
to:0,
start:1
}
})
document.getElementById("go").onclick = function () {
reduce.Start();
}
</script>
</body>
</html>