Why does using a webkit transition with text result in text binding at the end?

Question

Please note the following: http://jsfiddle.net/2Vdef/1/

When you hover over a div, the text of the animation, but on the right at the end, has a very unattractive reference to opacity: 1. Why is it so cool? How can this be made smooth? Thanks

Answer 1

I ran into the same problem, and although this solution does not work in my case, it runs in yours.

http://jsfiddle.net/2Vdef/13/

Add back visibility.

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; 

EDIT: The solution in my case was really the opposite. You just need to apply it to the correct item. I animated the opacity of a and suggested that backface-visbility should be applied to a . Instead, it had to be applied to container a .

Doesn't work: http://jsfiddle.net/9PmXu/ Fixed: http://jsfiddle.net/9PmXu/1/

Answer 2

It looks great on Chrome and FF Win 7 / OS X for me, but in IE, of course, there is no gradual change in opacity. For all browsers, you can try to achieve the same effect using jQuery and adjust the animation speed as you wish. http://jsfiddle.net/2Vdef/8/

Answer 3

Try changing this:

 -webkit-transition: opacity 1s ease; -moz-transition: opacity 1s ease; -o-transition: opacity 1s ease; transition: opacity 1s ease; 

For this:

 -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; 

It should just make all of your transition problems smoother.

In addition, the correct answer is also from @Slave, but change the value of “200” to “600” to make it smoother. The answer is correct, but my answer is pure CSS.

Answer 4

Turns out you can prevent volatility:

 -webkit-transform: translateZ(0); 

http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/