css3过渡不能在mozilla中运行，但其他浏览器也可以

Question

我一直在尝试使用css3转换在mozilla运行我的代码..

.header {
    width:100%;
    height:160px;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
}

 $(window).scroll(function() {
    $('.header').css({ 'height':'80px' });
 });

问题在于mozilla没有过渡动画，而在Chrome中则有。

Answer 1

DEMO

试试这个：

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

说明：

-webkit-...  // For Webkit browser(Chrome, Safari...)
-moz-...     // For Mozilla browser
-ms-...      // For Microsoft browser
-o-...       // For Opera browser
none...      // For all browser(Newest version)

Reference

Answer 2

可以使用animate选项在所有浏览器中都可以正常工作。

jquery ui以及代码的jquery也需要工作。

的CSS：

.header{

    height:200px;
    background:#232323;
}

这里的时间也可以指定为1500ms。 代码如下：

$( ".header" ).animate({

       height: "100px",
  }, 1500 );