CSS转换仅适用于FireFox

Question

我制作了一个带动画和过渡的基本网站。 如果你单击5列/条中的1个，那么点击的那个就像它应该的那样动画到全屏。 如果单击全屏版本以关闭它，则文本字段将与jquery折叠。这适用于所有浏览器。之后它应该再次转换到bar /列，但它只在firefox中执行。在我测试的其他浏览器（chrome / safari）中，它立即进入该位置。

我现在拥有它的方式是，如果你是全屏（焦点）并单击然后它会折叠文本并在回调中添加类转换：

$story.slideUp("fast", function() {  
       $item.addClass("transition"); 
       $item.removeClass("focus");
});

css类：

.transition {
     -webkit-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
     -moz-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
     -o-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
     -ms-transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
     transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
}

我在jsfiddle中有完整的东西：

http://jsfiddle.net/clankill3r/actrsjo2/

我尝试调试它已经有一段时间但似乎没有任何效果。 我希望我能错过一些非常愚蠢的东西。 希望有人可以提供帮助。