html - css3 transform transition 配合缩放，字体大小变化的问题 ？

Question

.hoverMenu{
    -webkit-transition:all 0.1s;
    -moz-transition:all 0.1s;
    -o-transition:all 0.1s;
    transition:all 0.1s;
}

.hoverMenu:hover{
    -webkit-transform: scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}

鼠标移动到这个p上面的时候，字体会变细变宽，最后正常 ？ 如何防止这种问题 ？

scale（） 这个属性会影响字体 ？ 如何不让字体受到影响

这种方式确实还是有问题,通过绝对定位还是可以实现但是麻烦,所以还是通过jquery最好了.

Answer 1

你把transition裡面的all改成具體要變化的屬性 all的意思是改變所有

Answer 2

font-stretch:normal;
去掉就行了。 。

Answer 3

字體變大不關all的事情，transition:all 0.1s;這只是過度時間

.hoverMenu:hover .font{transform:scale(1);}，
.font是你不想變大的文字的一個類，把它的放大倍率為1（不變）試試

Answer 4

前幾天看到百度網頁,是把字體先放大在縮回原來的大小.效果還挺理想

Answer 5

你要做縮放的動畫是吧？別用scale唄？用translate3D(0,0,0) -> translate3D(0,0,50000)這樣的動畫更平滑；需要配合perspective屬性；
PS：因為文字需要瀏覽器依據系統的font antialias（字體平滑或win裡面的那個TrueType），為了節省性能損耗，需要在動畫的時候暫時禁用字體平滑，動畫結束後再棄用字體平滑；這就是你看到字體細一下，轉角都很銳了，然後動畫完成後字體有變回平滑了；為了防止這種噁心的狀況，一般這種都會配合opacity的動畫，吧文字做成淡入的動畫。 。 。算是障眼法吧；