होवर पर बदलती अस्पष्टता पर पाठ झिलमिलाहट

Question

मैं कुछ बहुत आसान करने की कोशिश कर रहा हूं, पैरा के पास ओपेसिटी 0 पर सेट है, जब पैरा div की अस्पष्टता 1 में बदल जाती है, तो अस्पष्टता परिवर्तन के बाद पाठ में परिवर्तन होता है , यह बिल्कुल झटकेदार नहीं है, पाठ थोड़े स्वयं स्वयं को समायोजित करता है जो थोड़ा अजीब है। http://jsfiddle.net/krish7878/7t6GM/

एचटीएमएल कोड::

<div class="para"> 
    <p> SOME SAMPLE TEXT </p> 
</div> 

सीएसएस कोड:

.para{ 
     width: 1000px; 
     border: 1px solid #000; 
    } 
    .para p{ 
     font-family: Arial, sans-serif; 
     font-size: 80px; 
     opacity: 0; 
    } 
    .para:hover p{ 
     opacity: 1; 

     transition:   all 400ms ease; 
     -moz-transition: all 400ms ease; 
     -webkit-transition: all 400ms ease; 
     -o-transition:  all 400ms ease; 
     -ms-transition:  all 400ms ease; 
    } 

Answer 1

समाधान hidden को backface-visibility संपत्ति के मूल्य बदलने के लिए है

यहाँ बेला है।

डिफ़ॉल्ट मान visible है।

Updated Example

.para p { 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    font-family: Arial, sans-serif; 
    font-size: 80px; 
    opacity: 0; 
}