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>

- Ahmed A.M

---

这与解决方案无关，但是你的标志很不好看... - Greeso

哈哈！很好，你懂阿拉伯语 :3 - Ahmed A.M

在我看来，善待他人，他们也会善待你 :) 不好意思，我不知道你问题的答案。 - Greeso

你的意思是鼠标离开后还要保持在1.4倍缩放吗？ - MeTe-30

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>

Test it here: http://jsfiddle.net/XbUC8/

- Tibor B.