使用MooTools通过浏览器更改固定位置的动画

Question

我需要处理一个动画，当我点击屏幕时，图像将全屏显示，它将弹出一个div。为此，我使用了以下代码。

<div class="header_relative">
<header id="cover_photo_header" class="large">
<img></img>
 </header>
 </div>

样式：

<style>
header_relative
{
position:relative
}
  header, a, img{
  transition: all 2s;
  -moz-transition: all 2s;
 -webkit-transition: all 2s; 
 -o-transition: all 2s; 
}
header.large
{
 position: fixed;
  top: 0;
    left: 0; 
   width:100%;
  height:100%;
 overflow: hidden;
 z-index: 19;

}
header.small
{
position: fixed;
overflow: hidden;
 z-index: 19;
 }
</style>

使用Javascript：

 window.addEvent('click', function(){
$('global_content').getElement('header.large').style.width = '770px';
$('global_content').getElement('header.large').style.height = '300px';
   $('global_content').getElement('header.large').style.margin = 'auto';
 $('global_content').getElement('header.large').style.top = '-294px';
 $('global_content').getElement('header.large').style.left = '29.1%';
setTimeout(function(){
//do what you need here
$('global_content').getElement('header').removeClass("large").addClass("small");
func, delay
}, 2000);
});

但他的动画正在改变左边。你们可以帮助我如何摆脱这个