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上遇到此错误：这是错误：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');
});

不要忘记将鼠标移开。

css3过渡 - 自定义风格

2 个答案: