CSS 3 - 规模转换在谷歌浏览器中快速恢复

Question

我有一个问题，我有以下代码用于增加使用CSS3过渡的比例，最后它会在增加后快速恢复到原始比例。

CSS：

.big{


        transition:all 0.3s ease-in-out;
        display:inline;
}
.big:hover{

-webkit-transform:scale(1.4);
}

HTML：

<h1 class = "big">Typo</h1>

Answer 1

尝试使用inline-block而不是inline（同样，建议同时添加其他浏览器的兼容性）。

CSS：

.big {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}
.big:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

HTML：

<h1 class="big">Typo</h1>

在此测试：http://jsfiddle.net/XbUC8/