css3转换-自定义样式

Question

转换应仅适用于宽度和高度

logo-small {
    top:0 ;
    width:198px;
    height:198px;
    position:absolute;
    -webkit-transition: all 2s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
} 
logo-small:hover {
    top:100px ;
    width:298px;
    height:298px;
} 

有什么想法吗？

Answer 1

您已经指定转换应该影响所有属性。尝试

#logo-small:hover {
    transition-property: width, height;
    top:100px ;
    width:298px;
    height:298px;
}

或

#logo-small {
    top:0 ;
    width:198px;
    height:198px;
    position:absolute;
    -webkit-transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
    -moz-transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
    transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
}

编辑：添加回旧答案，修复

Answer 2

我希望你只在Moz Firefox上遇到这个bug：错误如下：https://bugzilla.mozilla.org/show_bug.cgi?id=821976

创建不同的css类以添加效果，并通过javascript 在悬停时应用该类

.newClass {
    top:100px ;
    width:298px;
    height:298px;
}
$('.logo-small').on('hover', function(){
    $(this).addClass('newClass');
});

别忘了把鼠标移走。