css – 文本在悬停时改变不透明度时闪烁

我正在尝试做一些非常简单的事情,一个para的不透明度设置为0,当在父div上盘旋时,para的不透明度变为1,在不透明度改变后发生了文本的变化,它不是完全闪烁,文本有点自我调整自己有点奇怪.

这是小提琴：
http://jsfiddle.net/krish7878/7t6GM/

HTML代码：

<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;
    }

解决方法

解决方案是将 backface-visibility属性值更改为隐藏.

默认值是可见的.

Updated Example

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