text flickers on changing opacity on hover

I am trying to do something very simple, a para has opacity set to 0, when hovered on parent div the para’s opacity changes to 1, there is a change of text happening after the opacity changes, it’s not exactly flickering, the text kinda self adjusts itself which is a bit odd.

Here’s the 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;
}

solution

The solution is to change the backface-visibility property value to hidden.

The default value is visible.

Updated Example

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