sfarfallio di testo su cambio di opacità su hover

Question

Sto provando a fare qualcosa di molto semplice, un para ha opacità impostata su 0, quando aleggia su genitore div l'opacità del para cambia in 1, c'è un cambio di testo che accade dopo le modifiche di opacità , non è esattamente sfarfallio, il testo si regola da solo, il che è un po 'strano.

Ecco il violino: Codice http://jsfiddle.net/krish7878/7t6GM/

HTML: Codice

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

CSS:

.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

La soluzione è quella di modificare il valore backface-visibility proprietà hidden.

Il valore predefinito è visible.

Updated Example

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