văn bản nhấp nháy khi thay đổi độ mờ trên di chuột

Question

Tôi đang cố gắng làm điều gì đó rất đơn giản, một đoạn có độ mờ được đặt thành 0, khi di chuột lên div cha mẹ của độ mờ đục của para thay đổi thành 1, có thay đổi văn bản xảy ra sau khi thay đổi độ mờ , nó không phải là chính xác nhấp nháy, các văn bản kinda tự điều chỉnh bản thân đó là một chút lẻ.

Đây là fiddle: http://jsfiddle.net/krish7878/7t6GM/

HTML Code:

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

CSS Code:

.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

Giải pháp là thay đổi giá trị tài sản để backface-visibilityhidden.

Giá trị mặc định là visible.

Updated Example

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