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

Question

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

When you move your mouse over the div, the text animates in but right at the end has a very unattractive snap into opacity:1. Why so abrupt? How can this be made smooth? Thanks

Answer 1

I've run into the same problem, and while this solution doesn't work in my case it does in yours.

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

Add backface-visibility.

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

EDIT: The solution in my case was indeed backface-visbility. You just need to apply it to the correct element. I animated the opacity of a, and assumed that backface-visbility needed to be applied to a. Instead, it needed to be applied to the container of a.

Not working: http://jsfiddle.net/9PmXu/ Fixed: http://jsfiddle.net/9PmXu/1/

Answer 2

It looks fine on Chrome and FF Win 7 / OS X to me, but on IE of course no gradual opacity change. For all browsers, you could try to achieve the same effect with jQuery and tweak the animation speed as you like. 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;

To 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 your transition problems be more smooth.

Also, the answer above from @Slave is correct also, but change the '200' to '600' to make it a bit more smooth. The answer is correct, but my answer is in pure CSS.

Answer 4

Turns out you can prevent the choppyness with:

-webkit-transform: translateZ(0);

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