Miga tekst na zmianę krycia po najechaniu myszą

Question

Próbuję zrobić coś bardzo prostego, para ma krycie ustawione na 0, gdy unosi się na div rodzica, krycie pary zmienia się na 1, następuje zmiana tekstu po zmianie krycia , nie jest to dokładnie migotanie, tekst sam się dostosowuje, co jest trochę dziwne.

Oto skrzypce: http://jsfiddle.net/krish7878/7t6GM/

HTML kod: Kod

<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

Rozwiązaniem jest zmiana wartości backface-visibility własności do hidden. Domyślna wartość to .

Updated Example

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