css transtion不生效_css 子元素transition动画为什么无效？

写了个模态窗口的飞入效果

提示

#mask{

display: none;

width: 100%;

height: 100%;

z-index: 100;

position: fixed;

background-color: rgba(0, 0, 0, 0.8);

text-align: center;

}

#tips{

position: absolute;

background-color: #0b93d5;

width: 600px;

height: 200px;

text-align: center;

top: 50%;

left: 50%;

margin-left: -300px;

margin-top: -100px;

font-size: 16px;

opacity: 0;

-webkit-transform:scale(3) ;

-moz-transform: scale(3);

-ms-transform: scale(3);

-o-transform:scale(3) ;

-webkit-transition: transform 0.8s ease-in,opacity 0.8s ease-in;

-moz-transition: transform 0.8s ease-in,opacity 0.8s ease-in;

-ms-transition: transform 0.8s ease-in,opacity 0.8s ease-in;

-o-transition: transform 0.8s ease-in,opacity 0.8s ease-in;

transition: transform 0.8s ease-in,opacity 0.8s ease-in;

}

$("#test").click(function(){

$("#mask").show();

$("#tips").css({

'-webkit-transform':'scale(1)',

'-moz-transform': 'scale(1)',

'-ms-transform': 'scale(1)',

'-o-transform':'scale(1)',

'opacity':1

});

将隐藏的mask显示后，tips直接显示动画最后的状态，整个动画的过程跳过了，但是我把mask的display:none去掉，再点击测试，动画效果正常。我在改变css属性前已经把mask显示了，原理上跟我第二种测试方法应该没有任何区别。找不到原因。。谁来解释下。。

更新：

我把$("#tips").css({

'-webkit-transform':'scale(1)',

'-moz-transform': 'scale(1)',

'-ms-transform': 'scale(1)',

'-o-transform':'scale(1)',

'opacity':1

});

用setTimeout(function(){},0)包裹起来结果就没问题了。。还是不知道是什么原因