CSS Dönüşü Ölçeği metni bulanıklaştırır

Question

Tetiklendiğinde kutu genişler. Sadece sahip olduğum konu, geçiş sırasında metnin bulanıklaştığı ve 'dönüştürüldüğünde' tekrar keskinleştiği.

burada göndermeden önce ben bir araştırma var karar verdi ve de benimki ile bir sorun gibi görünüyor bu yazı geldi:

How to force re-render after a WebKit 3D transform in Safari

http://duopixel.com/stack/scale.html Ben onların cevabını başvuran

benim yapı ve hala bulanık etkisi olur. Aşağıda bir bağlantı sağladım ve eğer bana sahip olduğum şeyler konusunda tavsiyede bulunabiliyorsa, bu harika olurdu! Geçiş kodu

örn:

-moz-transform:scale(1.05,1.05); 

http://jsfiddle.net/VcVpM/1/

Answer 1

o genişlik, yükseklik, sol, üst, font-size öznitelikleri ayarlama eşdeğer olmasa da: Chrome'da bulanıklık olmaksızın hover eserleri .

.cta:hover { 
    width: 500px; 
    height: 500px; 
    font-size: 400%; 
} 

yalnızca diğer iş çevresinde animasyon @keyframes kullanımı ve bunların ~ 5 ya da 10 arasında iyi bir miktarını ayarlamak için olmak "olabilir", her bir anahtar kare arasında bulanıklık bir düzenleme gücü olabilir.

Answer 2

ben CSStricks.com bu bulundu:

Bu da

translate3d(0, 0, 0) 

kullanmak için dönüşümleri ayarlarsanız, bunu düzeltmek, ancak yazı döndürme biraz bulanık olmasına neden vermez görünür/dönüşümü. Bakınız: http://codepen.io/WillsonSmith/pen/4/2

Jquery'yi kullanıyorum ve kaydırmak için kaydırıcımın H3 etiketlerine ihtiyacım vardı. Daha büyük metin benim için bulanık değildi.

$ ("# slider1_container") satırını yazdım ("h3"). Css ("- webkit-dönüştürme", "translate3d (0,0,0)") css ("- webkit) -txt-strok "," 0.15px ");

ve bu benim için en iyi şekilde düzeltildi. Dönüşümümün önüne -webkit'e ihtiyacım vardı. Nedenini bilmiyorum, çünkü diğerleri bunu kullanmamayı söyledi. Bazı farklı ayarlarla görüntünün yolunu görüntüledim.