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

并且不要忘记删除鼠标。