Hello everyone,
I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right.
Here is the structure of my class:
.mover {
-webkit-transition:all 0.4s ease-in-out;
}
Upon clicking a button, the following code is executed:
var newPosition = "translate3d(" + newPosition + "px, 0, 0)";
$('.mover ').css('-webkit-transform', s);
The animation works perfectly fine except for one issue – there is a noticeable flicker the first time the user triggers the transition.
Although I understand that using translate3d may not be necessary since I am only shifting the div horizontally, I believe it forces GPU acceleration on the iPad. Can someone confirm this for me?
Thank you in advance!
[UPDATE]
To clarify about the "flicker" issue – through various experiments with CSS3 transitions on the iPad, I consistently observe a distinct flicker at the beginning or end of the animations.
In essence, the transitions themselves are extremely smooth. However, depending on specific settings, there is a visible flicker just before or after the transition occurs.
For instance, when working with three stacked PNG images, the bottom image has an opacity of 1.0, while the top two have an opacity of 0.0. Utilizing -webkit-keyframes, I achieve seamless fading transitions in between the photos. Yet, as the animation concludes, the bottom photo experiences a brief flicker. It appears as if the browser needs to redraw/re-render the screen, resulting in a slight delay.
This flickering greatly impacts the overall effect and renders the transitions unusable. While barely noticeable on my iMac, it is prominent on the iPad.